หลายครั้งหลายหน ที่อยากจะจัดการให้ div ตัวนี้ div ตัวนั้นอยู่กึ่งกลาง แต่จะทำยังไงละ มีวิธีมาแนะนำครับ แต่ต้องเป็นกรณีที่เรารู้ความกว้าง และความสูงของ div ตัวนั้นนะครับ
CSS : จัด div ที่เราต้องการ ให้อยู่กึ่งกลาง
สมมติว่าเรามี div อยู่ตัวนึง อยากจะให้มันอยู่ตรงกลางจะทำยังไงดี เรารู้แล้วว่า div ตัวนี้กว้าง 200px และสูง 100px งั้นเรามาลองใช้ position แล้วให้ top:50% กับ left:50% แล้ว มันน่าจะอยู่ตรงกลางนะ ลองดู
[css]
#box{
width:200px;
height:100px;
position:fixed;
top:50%;
left:50%;
}
[/css]
ผลลัพธ์ที่เราได้ออกมาจะเป็นแบบนี้ครับ
![CSS : วิธีจัดให้อยู่กึ่งกลาง [1]](https://rabbitinblack.com/wp-content/uploads/2011/10/css-11.jpg "CSS : วิธีจัดให้อยู่กึ่งกลาง")
จะเห็นได้ว่า ตำแหน่งที่มันใช้วางตำแหน่ง จะยึดหลักไว้ที่มุมด้านซ้ายบน ทำให้ top:50%; left:50%; ให้ผลลัพธ์ในแบบนี้ ดังนั้นเราจะทำต่อโดยใช้ margin เพื่อดึง div ให้มาอยู่ตรงกึ่งกลาง คราวนี้ค่าที่เราจะใช้คิดค่ามาจากเอาความกว้างหาร 2 แล้วนำไปใส่เป็นค่าลบให้ margin-left และเอาค่าความสูงหาร 2 แล้วนำไปใส่เป็นลบให้ margin-top ซึ่งความกว้าง 200px และความสูง 100px จึงได้ค่าออกมาเป็น
[css]
#box{
width:200px;
height:100px;
position:fixed;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-50px;
}
[/css]
จะทำให้ div ขยับตามที่เราตั้งค่าไว้
![CSS : วิธีจัดให้อยู่กึ่งกลาง [2]](https://rabbitinblack.com/wp-content/uploads/2011/10/css-21.jpg "CSS : วิธีจัดให้อยู่กึ่งกลาง")
ผลลัพธ์จึงออกมาเป็นดังรูป
![CSS : วิธีจัดให้อยู่กึ่งกลาง [3]](https://rabbitinblack.com/wp-content/uploads/2011/10/css-31.jpg "CSS : วิธีจัดให้อยู่กึ่งกลาง")
Leave a Reply