MrWebMaker's Blog

January 10, 2010

วิธีการจัด DIV ให้อยู่ตรงกึ่งกลางหน้า Webpage โดยใช้ CSS

Filed under: Web Designing — admin @ 7:39 am

สำหรับการจัด DIV ให้อยู่ตรงกลางหน้าเว็บเพจ โดยใช้ CSS นั้นต้องแบ่งเป็น 2 อย่างคือ

  1. การทำให้อยู่กึ่งกลางในแนวนอน – ทำได้ 2 วิธี วิธีแรกสำหรับ DIV ที่มี position เป็น relative หรือ ไม่มี เท่านั้น ให้่ใช้วิธีการเพิ่ม Attribute เข้าไปใน DIV นั้น เป็น margin:auto; ดังเช่นในภาพ

    ส่วนวิธีที่สองนั้น มีไว้สำหรับ DIV ที่มี position เป็น absolute และต้องรู้ความกว้างของ DIV ที่แน่นอนเป็น pixel ไม่ใช่ % โดยให้ใช้วิธีการกำหนดเพิ่ม Attribute เข้าไปใน DIV โดยให้ใส่ left เป็น 50%, แล้วใส่ margin-left เป็น ความยาวของ div หารด้วย 2 ตัวอย่างเช่น DIV header มีความยาว 500 pixel ก็ให้ใส่เป็นติดลบ 250 px ตามภาพ
  2. การทำให้อยู่กึ่งกลางในแนวตั้ง – จะสามารถทำได้เมื่อเรารู้ความสูงที่แน่นอนของ DIV นั้น กล่าวคือมีการใส่ Attribute height เป็น pixel ไม่ใช่เป็น % และมี position เป็น absolute เท่านั้น โดยให้ใช้วิธีการกำหนดเพิ่ม Attribute เข้าไปใน DIV โดยให้ใส่ top เป็น 50%, แล้วใส่ margin-top เป็น ความสูงของ div หารด้วย 2 ตัวอย่างเช่น DIV header มีความสูง 500 pixel ก็ให้ใส่เป็นติดลบ 250 px

Powered by WordPress