คือผมสร้าง div มาอันนึงแล้ว อยากให้ข้อความภายในมันอยู่ตรงกลาง ทั้งแนวนอนและแนวตั้งอ่าครับ ไม่ทราบว่าทำยังไงเหรอครับ
.bg {
height: 50px;
width: 200px;
background-color: #000000;
color: #FFFFFF;
}
<div class="bg">Text</div>
ขอบคุณครับ
text-align: center;
เเบบนี้ ลองดูหรือยังหละครับ
.bg {
height: 50px;
width: 200px;
background-color: #000000;
color: #FFFFFF;
text-align: center;
}
อยากได้ตรงกลางแบบไหนครับ คือ ถ้าข้อความด้านใน คิดว่ามีบันทัดเดียวผมตอบให้ได้ ถ้ามีมากกว่า
โค้ดที่ผมว่าจะใช้ไม่ได้
.bg {
height: 110px;
width: 200px;
background-color: #000000;
color: #FFFFFF;
text-align:center;
line-height:110px;
vertical-align:middle;
}
<div class='bg'>dfsfdaf</div>
ผมอยากได้แบบ ซ้าย-ขวา ครับ มีรึเึปล่า..
ตรงกลางไม่่ค่อยมีปัญหา..
ซ้าย ขวา นี่ลำบากจริงๆ
ลอยอยู่ตรงกลางอ่ะเหรอ
ลอง
.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;
}
อ้างถึงจาก: 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>
ขอบคุณมากครับ แบบนี้ใช้ได้แล้วครับ แต่มันต้องบรรทัดเดียวจริงๆ หลายบรรทัดมันใช้ไม่ได้ ^^
อ้างถึงจาก: 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 มันอยู่ตรงกลางอ่าครับ ทั้งแนวนอนและแนวตั้ง ครับ
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
อ้างถึงจาก: 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 มันก็วิธีเดียวกันแหละ
ทำไมถึงอยากใช้ div จัด vertical-align อ่ะครับ
มันเป็น block-element เหมาะสำหรับจัด layout นะครับ ไม่ค่อยเหมาะกับการจัด text เท่าไร (มั้ง)
แนะนำให้ใช้ element ตัวอื่น ๆ ช่วยเช่น <p> นะครับ
แนะนำเท่าที่รู้นะครับ รอผู้ที่รู้เยอะมาตอบต่อละกันครับ :) :)
โอ้ว แต่ละท่านตอบไป รู้สึกว่าตัวเองความรู้น้อยไปเยย ยังคงงูๆปลาๆต่อไป -*- :P
สมมติจะวางวัตถุ เช่น รูปภาพหรือตาราง ในที่นี้สมมติว่าอยากวางภาพ 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>
เอาไปดัดแปลงใช้ดูนะคะ
ขอบคุณมากครับ
หลักการคือ
top:50%
แล้วให้ margin-left:=ครึ่งหนึ่งของความกว้างของ element
div{
width:500px;
left:50%;
margin-left:-250px;
}