<div> จะจัดยังไงให้มันอยู่ตรงกลาง ทั้งแนวนอนและแนวตั้งอ่าครับ

xmen256k · 24 กันยายน 2009, 20:58:59

คือผมสร้าง div มาอันนึงแล้ว อยากให้ข้อความภายในมันอยู่ตรงกลาง ทั้งแนวนอนและแนวตั้งอ่าครับ ไม่ทราบว่าทำยังไงเหรอครับ

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

โค้ด เลือก

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

ขอบคุณครับ

เป็นติ่งไรเนี่ย · 24 กันยายน 2009, 21:49:59

text-align: center;
เเบบนี้ ลองดูหรือยังหละครับ

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

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>

galaxy · 24 กันยายน 2009, 22:12:35

ผมอยากได้แบบ ซ้าย-ขวา ครับ มีรึเึปล่า..

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

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

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;
}

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>

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

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 มันอยู่ตรงกลางอ่าครับ ทั้งแนวนอนและแนวตั้ง ครับ

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

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 มันอยู่ตรงกลางอ่าครับ ทั้งแนวนอนและแนวตั้ง ครับ

เพิ่มเข้าไปอีกจิ - -*

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

genetic · 24 กันยายน 2009, 23:03:44

ทำไมถึงอยากใช้ div จัด vertical-align อ่ะครับ

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

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

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

xmen256k · 24 กันยายน 2009, 23:40:39

โอ้ว แต่ละท่านตอบไป รู้สึกว่าตัวเองความรู้น้อยไปเยย ยังคงงูๆปลาๆต่อไป -*-

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>

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

lltumll

ขอบคุณมากครับ

kuznetsova

หลักการคือ

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

div{

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