ThaiSEOBoard.com

พัฒนาเว็บไซต์ => Programming => ข้อความที่เริ่มโดย: xmen256k ที่ 24 กันยายน 2009, 20:58:59


หัวข้อ: <div> จะจัดยังไงให้มันอยู่ตรงกลาง ทั้งแนวนอนและแนวตั้งอ่าครับ
เริ่มหัวข้อโดย: xmen256k ที่ 24 กันยายน 2009, 20:58:59
คือผมสร้าง div มาอันนึงแล้ว อยากให้ข้อความภายในมันอยู่ตรงกลาง ทั้งแนวนอนและแนวตั้งอ่าครับ ไม่ทราบว่าทำยังไงเหรอครับ

โค๊ด:
.bg {
	height: 50px;
	width: 200px;
	background-color: #000000;
	color: #FFFFFF;
}

โค๊ด:
<div class="bg">Text</div>

ขอบคุณครับ

หัวข้อ: Re: <div> จะจัดยังไงให้มันอยู่ตรงกลาง ทั้งแนวนอนและแนวตั้งอ่าครับ
เริ่มหัวข้อโดย: เป็นติ่งไรเนี่ย ที่ 24 กันยายน 2009, 21:49:59
text-align: center;
เเบบนี้ ลองดูหรือยังหละครับ

.bg {
   height: 50px;
   width: 200px;
   background-color: #000000;
   color: #FFFFFF;
        text-align: center;
}

หัวข้อ: Re: <div> จะจัดยังไงให้มันอยู่ตรงกลาง ทั้งแนวนอนและแนวตั้งอ่าครับ
เริ่มหัวข้อโดย: Growth ที่ 24 กันยายน 2009, 21:58:41
อยากได้ตรงกลางแบบไหนครับ คือ ถ้าข้อความด้านใน คิดว่ามีบันทัดเดียวผมตอบให้ได้ ถ้ามีมากกว่า

โค้ดที่ผมว่าจะใช้ไม่ได้


.bg {
   height: 110px;
   width: 200px;
   background-color: #000000;
   color: #FFFFFF;
   text-align:center;
   line-height:110px;
   vertical-align:middle;
}


<div class='bg'>dfsfdaf</div>

หัวข้อ: Re: <div> จะจัดยังไงให้มันอยู่ตรงกลาง ทั้งแนวนอนและแนวตั้งอ่าครับ
เริ่มหัวข้อโดย: galaxy ที่ 24 กันยายน 2009, 22:12:35
ผมอยากได้แบบ ซ้าย-ขวา ครับ มีรึเึปล่า..

ตรงกลางไม่่ค่อยมีปัญหา..

ซ้าย ขวา นี่ลำบากจริงๆ

หัวข้อ: Re: <div> จะจัดยังไงให้มันอยู่ตรงกลาง ทั้งแนวนอนและแนวตั้งอ่าครับ
เริ่มหัวข้อโดย: g-ji ที่ 24 กันยายน 2009, 22:22:08
ลอยอยู่ตรงกลางอ่ะเหรอ

ลอง
.bg {
   height: 50px;
   width: 200px;
   background-color: #000000;
   color: #FFFFFF;
display:block;
margin: 0 auto;
}

แล้วเพิ่ม <p> เข้าไป
<div class='bg'><p>dfsfdaf</p></div>

.bg p{
text-align:center;
}

หัวข้อ: Re: <div> จะจัดยังไงให้มันอยู่ตรงกลาง ทั้งแนวนอนและแนวตั้งอ่าครับ
เริ่มหัวข้อโดย: xmen256k ที่ 24 กันยายน 2009, 22:27:34
อ้างจาก: Growth ที่ 24 กันยายน 2009, 21:58:41
อยากได้ตรงกลางแบบไหนครับ คือ ถ้าข้อความด้านใน คิดว่ามีบันทัดเดียวผมตอบให้ได้ ถ้ามีมากกว่า

โค้ดที่ผมว่าจะใช้ไม่ได้


.bg {
   height: 110px;
   width: 200px;
   background-color: #000000;
   color: #FFFFFF;
   text-align:center;
   line-height:110px;
   vertical-align:middle;
}


<div class='bg'>dfsfdaf</div>

ขอบคุณมากครับ แบบนี้ใช้ได้แล้วครับ แต่มันต้องบรรทัดเดียวจริงๆ หลายบรรทัดมันใช้ไม่ได้ ^^

หัวข้อ: Re: <div> จะจัดยังไงให้มันอยู่ตรงกลาง ทั้งแนวนอนและแนวตั้งอ่าครับ
เริ่มหัวข้อโดย: xmen256k ที่ 24 กันยายน 2009, 22:30:33
อ้างจาก: g-ji ที่ 24 กันยายน 2009, 22:22:08
ลอยอยู่ตรงกลางอ่ะเหรอ

ลอง
.bg {
   height: 50px;
   width: 200px;
   background-color: #000000;
   color: #FFFFFF;
display:block;
margin: 0 auto;
}

แล้วเพิ่ม <p> เข้าไป
<div class='bg'><p>dfsfdaf</p></div>

.bg p{
text-align:center;
}

แบบนี้ลองแล้วไม่ได้อ่าครับ กล่อง DIV ลอยอยู่ตรงกลางแทน  แต่อยากได้ ข้อความภายในกล่อง div มันอยู่ตรงกลางอ่าครับ ทั้งแนวนอนและแนวตั้ง ครับ

หัวข้อ: Re: <div> จะจัดยังไงให้มันอยู่ตรงกลาง ทั้งแนวนอนและแนวตั้งอ่าครับ
เริ่มหัวข้อโดย: genetic ที่ 24 กันยายน 2009, 22:51:04
โค๊ด:
	div.bg {
		width: 300px;
		height: 200px;
		border: 1px solid #eee;
		position: relative;
	}
	div.bg div {
		width: 100%;
		position: absolute;
		top: 45%;
		text-align: center;
		vertical-align: middle;
	}

<div class="bg">
<div>Hello</div>
</div>

ลองดูนะครับ ไปหาตามเว็บมาให้ครับ

แต่ถ้าอยากศึกษาเกี่ยวกับเบื้องต้นของ CSS มาเว็บผมได้เลยครับ  :) :) :)

http://www.basic-skill.com/index.php?sections=CSS&sec_id=10

หัวข้อ: Re: <div> จะจัดยังไงให้มันอยู่ตรงกลาง ทั้งแนวนอนและแนวตั้งอ่าครับ
เริ่มหัวข้อโดย: g-ji ที่ 24 กันยายน 2009, 22:55:30
อ้างจาก: xmen256k ที่ 24 กันยายน 2009, 22:30:33
อ้างจาก: g-ji ที่ 24 กันยายน 2009, 22:22:08
ลอยอยู่ตรงกลางอ่ะเหรอ

ลอง
.bg {
   height: 50px;
   width: 200px;
   background-color: #000000;
   color: #FFFFFF;
display:block;
margin: 0 auto;
}

แล้วเพิ่ม <p> เข้าไป
<div class='bg'><p>dfsfdaf</p></div>

.bg p{
text-align:center;
display:block;
margin: 0 auto;
}

แบบนี้ลองแล้วไม่ได้อ่าครับ กล่อง DIV ลอยอยู่ตรงกลางแทน  แต่อยากได้ ข้อความภายในกล่อง div มันอยู่ตรงกลางอ่าครับ ทั้งแนวนอนและแนวตั้ง ครับ

เพิ่มเข้าไปอีกจิ - -*  :P ถ้าทำให้กล่อง DIV มันอยู่ตรงกลางได้ กับ p มันก็วิธีเดียวกันแหละ

หัวข้อ: Re: <div> จะจัดยังไงให้มันอยู่ตรงกลาง ทั้งแนวนอนและแนวตั้งอ่าครับ
เริ่มหัวข้อโดย: genetic ที่ 24 กันยายน 2009, 23:03:44
ทำไมถึงอยากใช้ div จัด vertical-align อ่ะครับ

มันเป็น block-element เหมาะสำหรับจัด layout นะครับ ไม่ค่อยเหมาะกับการจัด text เท่าไร (มั้ง)

แนะนำให้ใช้ element ตัวอื่น ๆ ช่วยเช่น <p> นะครับ

แนะนำเท่าที่รู้นะครับ รอผู้ที่รู้เยอะมาตอบต่อละกันครับ  :) :)

หัวข้อ: Re: <div> จะจัดยังไงให้มันอยู่ตรงกลาง ทั้งแนวนอนและแนวตั้งอ่าครับ
เริ่มหัวข้อโดย: xmen256k ที่ 24 กันยายน 2009, 23:40:39
โอ้ว แต่ละท่านตอบไป รู้สึกว่าตัวเองความรู้น้อยไปเยย ยังคงงูๆปลาๆต่อไป -*- :P

หัวข้อ: Re: <div> จะจัดยังไงให้มันอยู่ตรงกลาง ทั้งแนวนอนและแนวตั้งอ่าครับ
เริ่มหัวข้อโดย: barbies55 ที่ 24 กันยายน 2009, 23:59:25
สมมติจะวางวัตถุ เช่น รูปภาพหรือตาราง ในที่นี้สมมติว่าอยากวางภาพ myimages.gif ขนาด กว้าง 300x สูง 200 pixel ให้อยู่กลางจอภาพ
style.css ให้กำหนดแบบนี้

โค๊ด:
html, body {
height: 100%;
}

#wrapper {
	width:100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
}

#outer{
	width:100%;
	display:table;
	vertical-align:middle;
	height: 100%;
}
.container {
position:relative;
vertical-align:middle;
display:table-cell;
height: 200px;
}
.inner {
	width: 300px;
	height: 200px;
	margin-left:auto;
	margin-right:auto;
	padding: 0px;
}

ไฟล์ html ให้เขียนแบบนี้
โค๊ด:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<!--[if lt IE 8]>
<style type="text/css">
.container{top:50%}
.inner{top:-50%;position:relative;}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">
#outer{
position:relative;
overflow:hidden;
}
</style>
<![endif]-->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="outer">
<div class="container">
<div class="inner"><img src="myimages.gif" /></div>
</div>
</div>
</div></body>
</html>

เอาไปดัดแปลงใช้ดูนะคะ

หัวข้อ: Re: <div> จะจัดยังไงให้มันอยู่ตรงกลาง ทั้งแนวนอนและแนวตั้งอ่าครับ
เริ่มหัวข้อโดย: lltumll ที่ 19 พฤศจิกายน 2009, 11:49:55
ขอบคุณมากครับ

หัวข้อ: Re: <div> จะจัดยังไงให้มันอยู่ตรงกลาง ทั้งแนวนอนและแนวตั้งอ่าครับ
เริ่มหัวข้อโดย: kuznetsova ที่ 19 พฤศจิกายน 2009, 12:45:38
หลักการคือ

top:50%
แล้วให้ margin-left:=ครึ่งหนึ่งของความกว้างของ element

div{

 
  width:500px;
  left:50%;
  margin-left:-250px;
}



SMF 1.1.21 | Simple Machines | ThaiSEOBoard.com