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

Website AB191 update story CSS Of CSS CSS : วิธีจัดให้อยู่กึ่งกลาง กรณีรู้ความกว้างและความสูง Saturday, November 23, 2013 Story at now !!!

หลายครั้งหลายหน ที่อยากจะจัดการให้ div ตัวนี้ div ตัวนั้นอยู่กึ่งกลาง แต่จะทำยังไงละ มีวิธีมาแนะนำครับ แต่ต้องเป็นกรณีที่เรารู้ความกว้าง และความสูงของ div ตัวนั้นนะครับ

CSS : จัด div ที่เราต้องการ ให้อยู่กึ่งกลาง

สมมติว่าเรามี div อยู่ตัวนึง อยากจะให้มันอยู่ตรงกลางจะทำยังไงดี เรารู้แล้วว่า div ตัวนี้กว้าง 200px และสูง 100px งั้นเรามาลองใช้ position แล้วให้ top:50% กับ left:50% แล้ว มันน่าจะอยู่ตรงกลางนะ ลองดู

1

#box{

2	width:200px;

3	height:100px;

4	position:fixed;

5

top:50%;

6

left:50%;

7

}

ผลลัพธ์ที่เราได้ออกมาจะเป็นแบบนี้ครับ

ถ้าตั้งค่า top:50%; left:50%; จะได้ผลลัพธ์ดังรูป

จะเห็นได้ว่า ตำแหน่งที่มันใช้วางตำแหน่ง จะยึดหลักไว้ที่มุมด้านซ้ายบน ทำให้ top:50%; left:50%; ให้ผลลัพธ์ในแบบนี้ ดังนั้นเราจะทำต่อโดยใช้ margin เพื่อดึง div ให้มาอยู่ตรงกึ่งกลาง คราวนี้ค่าที่เราจะใช้คิดค่ามาจากเอาความกว้างหาร 2 แล้วนำไปใส่เป็นค่าลบให้ margin-left และเอาค่าความสูงหาร 2 แล้วนำไปใส่เป็นลบให้ margin-top ซึ่งความกว้าง 200px และความสูง 100px จึงได้ค่าออกมาเป็น

1

#box{

2	width:200px;

3	height:100px;

4	position:fixed;

5

top:50%;

6

left:50%;

7	margin-left:-100px;

8	margin-top:-50px;

9

}

จะทำให้ div ขยับตามที่เราตั้งค่าไว้

#box จะขยับไปด้านบน และด้านซ้ายตามรูป

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

ในที่สุด #box ก็อยู่กึ่งกลางแล้ว

Update Story at Saturday, November 23, 2013 In Category CSS Story CSS CSS : วิธีจัดให้อยู่กึ่งกลาง กรณีรู้ความกว้างและความสูง