xmen256k
หัวหน้าแก๊งเสียว
พลังน้ำใจ: 98
 ออฟไลน์
กระทู้: 1,999
|
 |
« เมื่อ: 24 กันยายน 2009, 20:58:59 » |
|
คือผมสร้าง div มาอันนึงแล้ว อยากให้ข้อความภายในมันอยู่ตรงกลาง ทั้งแนวนอนและแนวตั้งอ่าครับ ไม่ทราบว่าทำยังไงเหรอครับ .bg {
height: 50px;
width: 200px;
background-color: #000000;
color: #FFFFFF;
}
<div class="bg">Text</div>
ขอบคุณครับ |
|
|
|
|
บันทึกการเข้า
|
|
|
|
เป็นติ่งไรเนี่ย
หัวหน้าแก๊งเสียว
พลังน้ำใจ: 66
ออฟไลน์
กระทู้: 1,208
|
|
« ตอบ #1 เมื่อ: 24 กันยายน 2009, 21:49:59 » |
|
text-align: center;
เเบบนี้ ลองดูหรือยังหละครับ
.bg {
height: 50px;
width: 200px;
background-color: #000000;
color: #FFFFFF;
text-align: center;
}
|
|
|
|
|
บันทึกการเข้า
|
|
|
|
Growth
Verified Seller
หัวหน้าแก๊งเสียว
พลังน้ำใจ: 103
ออฟไลน์
กระทู้: 1,734
|
|
« ตอบ #2 เมื่อ: 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
เจ้าพ่อบอร์ดเสียว
พลังน้ำใจ: 226
ออฟไลน์
กระทู้: 3,099
|
|
« ตอบ #3 เมื่อ: 24 กันยายน 2009, 22:12:35 » |
|
ผมอยากได้แบบ ซ้าย-ขวา ครับ มีรึเึปล่า..
ตรงกลางไม่่ค่อยมีปัญหา..
ซ้าย ขวา นี่ลำบากจริงๆ
|
|
|
|
|
บันทึกการเข้า
|
รับทำหนังสือพอคเก็ตบุ๊คส ขายบนซีเอ็ด B2S ร้านหนังสือชั้นนำทั่วไป
ขาย Ebook สอนสุดยอดเคล็ดลับ(ที่คนทำหนังสือไม่เคยบอกคุณ)
แต่ผมจะสอนให้รวยด้วยการทำหนังสือขายบนซีเอ็ด Ebook สอนเคล็ดลับ ราคา เพียง 5,000 ฿
(หนังสือผมวางขายอยู่บนซีเอ็ดกว่า 10 เล่ม) PM
ขายบัญชี Adsense อายุ 4 ปี 10,000 บาท มีเงินค้างอยู่ 15$ เหลือ 1 บช. **หมดแล้ว
|
|
|
g-ji
เจ้าพ่อบอร์ดเสียว
พลังน้ำใจ: 231
ออฟไลน์
กระทู้: 3,254
|
|
« ตอบ #4 เมื่อ: 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
หัวหน้าแก๊งเสียว
พลังน้ำใจ: 98
ออฟไลน์
กระทู้: 1,999
|
|
« ตอบ #5 เมื่อ: 24 กันยายน 2009, 22:27:34 » |
|
อยากได้ตรงกลางแบบไหนครับ คือ ถ้าข้อความด้านใน คิดว่ามีบันทัดเดียวผมตอบให้ได้ ถ้ามีมากกว่า โค้ดที่ผมว่าจะใช้ไม่ได้ .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
หัวหน้าแก๊งเสียว
พลังน้ำใจ: 98
ออฟไลน์
กระทู้: 1,999
|
|
« ตอบ #6 เมื่อ: 24 กันยายน 2009, 22:30:33 » |
|
ลอยอยู่ตรงกลางอ่ะเหรอ ลอง .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
หัวหน้าแก๊งเสียว
พลังน้ำใจ: 76
ออฟไลน์
กระทู้: 1,703
|
|
« ตอบ #7 เมื่อ: 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/ind...php?sections=CSS&sec_id=10  |
|
|
|
|
บันทึกการเข้า
|
|
|
|
g-ji
เจ้าพ่อบอร์ดเสียว
พลังน้ำใจ: 231
ออฟไลน์
กระทู้: 3,254
|
|
« ตอบ #8 เมื่อ: 24 กันยายน 2009, 22:55:30 » |
|
ลอยอยู่ตรงกลางอ่ะเหรอ ลอง .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
หัวหน้าแก๊งเสียว
พลังน้ำใจ: 76
ออฟไลน์
กระทู้: 1,703
|
|
« ตอบ #9 เมื่อ: 24 กันยายน 2009, 23:03:44 » |
|
ทำไมถึงอยากใช้ div จัด vertical-align อ่ะครับ มันเป็น block-element เหมาะสำหรับจัด layout นะครับ ไม่ค่อยเหมาะกับการจัด text เท่าไร (มั้ง) แนะนำให้ใช้ element ตัวอื่น ๆ ช่วยเช่น <p> นะครับ แนะนำเท่าที่รู้นะครับ รอผู้ที่รู้เยอะมาตอบต่อละกันครับ |
|
|
|
|
บันทึกการเข้า
|
|
|
|
xmen256k
หัวหน้าแก๊งเสียว
พลังน้ำใจ: 98
ออฟไลน์
กระทู้: 1,999
|
|
« ตอบ #10 เมื่อ: 24 กันยายน 2009, 23:40:39 » |
|
โอ้ว แต่ละท่านตอบไป รู้สึกว่าตัวเองความรู้น้อยไปเยย ยังคงงูๆปลาๆต่อไป -*- |
|
|
|
|
บันทึกการเข้า
|
|
|
|
barbies55
Verified Seller
เจ้าพ่อบอร์ดเสียว
พลังน้ำใจ: 417
ออฟไลน์
กระทู้: 11,521
|
|
« ตอบ #11 เมื่อ: 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>
เอาไปดัดแปลงใช้ดูนะคะ |
|
|
|
|
บันทึกการเข้า
|
รับทำเทมเพลท รับโมเทมเพลทให้เข้ากับสคริปต์ต่างๆ
On the Internet, Never One Know You are a Dog.
ผ้าขี้ริ้วห่อทองย่อมเป็นทองฉันใด เอาทองเปลวมาห่อขี้ก็ยังเป็นขี้ฉันนั้น
|
|
|
lltumll
สมุนแก๊งเสียว
พลังน้ำใจ: 64
ออฟไลน์
กระทู้: 575
|
|
« ตอบ #12 เมื่อ: 19 พฤศจิกายน 2009, 11:49:55 » |
|
ขอบคุณมากครับ
|
|
|
|
|
บันทึกการเข้า
|
|
|
|
kuznetsova
หัวหน้าแก๊งเสียว
พลังน้ำใจ: 137
ออฟไลน์
กระทู้: 1,316
|
|
« ตอบ #13 เมื่อ: 19 พฤศจิกายน 2009, 12:45:38 » |
|
หลักการคือ
top:50%
แล้วให้ margin-left:=ครึ่งหนึ่งของความกว้างของ element
div{
width:500px;
left:50%;
margin-left:-250px;
}
|
|
|
|
|
บันทึกการเข้า
|
|
|
|
|
พัฒนาเว็บไซต์
