CSS : วิธีจัดให้อยู่กึ่งกลาง กรณีรู้ความกว้างและความสูง

หลายครั้งหลายหน ที่อยากจะจัดการให้ 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]
ถ้าตั้งค่า top:50%; left:50%; จะได้ผลลัพธ์ดังรูป

จะเห็นได้ว่า ตำแหน่งที่มันใช้วางตำแหน่ง จะยึดหลักไว้ที่มุมด้านซ้ายบน ทำให้ 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]
#box จะขยับไปด้านบน และด้านซ้ายตามรูป

ผลลัพธ์จึงออกมาเป็นดังรูป

CSS : วิธีจัดให้อยู่กึ่งกลาง [3]
ในที่สุด #box ก็อยู่กึ่งกลางแล้ว

Rabbitinblack

Blog เกี่ยวกับ HTML CSS jQuery Wordpress และเรื่องอื่น ๆ สัพเพเหระ

Proudly powered by WordPress & SeedThemes