ตอนที่แล้ว เราใช้ text-align ในการจัดให้ ข้อความอยู่ตรงกลางมาแล้ว ต่อไปเราจะมาดูวิธีการจัดด้วย margin กัน

เราเรียนรู้มาจากตอนที่แล้วว่า ถ้าเราต้องการให้มันอยู่ตรงกลาง กรอบนอก ต้องใหญ่กว่าสิ่งที่อยู่ภายใน ซึ่งจริงๆแล้วถ้าเรายึดกฏนี้อย่างเคร่งครัดเราคงไม่พบปัญหากลางจอครับ

กฏข้อที่ 1 การจะอยู่กลางจอได้นั่นหมายความว่ามันต้องอ้างอิงจากกรอบภายนอก เช่น <div style="margin:0 auto">Center</div> เขียนแบบนี้ให้ตายมันก็ไม่กลางครับ เพราะมันไม่รู้จะไปกลางกับอะไร ต้องเป็น <div><div style="margin:0 auto">Center</div> </div> div ข้างในจะจัดอยู่กลาง div ภายนอก ครับ

กฏข้อที่ 2 div ภายนอก ต้องใหญ่กว่าภายใน เพื่อให้สังเกตุได้ว่ามันอยู่ตรงกลาง เช่น <div style="width:200px"><div style="width:100px;margin:0 auto">Center</div> </div> (โค้ดเป็นตัวอย่างเพื่อการทำความเข้าใจนะครับ ใช้จริงอาจต้องปรับตามความเหมาะสม)

จริงๆแล้วมันมีกฏแค่นี้แหละครับ ทำให้ได้ทั้ง 2 ข้อ รับรองกลางแน่

border:1px solid red;
display: block;

border:1px solid green;
display: table;
margin: 0 auto;
width: 200px;

ข้อสังเกตุ
กรอบนอก(สีแดง) ผมกำหนด display:block เพื่อให้มันกว้างเต็มจอ
กรอบใน(สีเขียว) ผมกำหนด display:table และ width:200px เพื่อกำหนดขนาดให้มันเล็กกว่ากรอบนอก และ margin: 0 auto เพื่อให้มันอยู่ตรงกลาง

จริงๆแล้ว หลายคนอาจสงสัยว่า ทำไมไม่ใช้ display:table อย่างเดียวโดยไม่ต้องกำหนด width ก็ได้ เพราะตามกฏแล้ว หากกำหนด display เป็น table แล้วขนาดของกรอบน่าจะแปรเปลี่ยนตามสิ่งที่อยู่ภายใน ซึ่งนั่นน่าจะหมายความว่ากรอบจะมีขนาดพอดีกับข้อความ ซึ่งจะเล็กกว่ากรอบนอก

แต่ในความเป็นจริง ถ้าบราวเซอร์ทำตามกฏทุกกรณีมันก็คงเป็นเช่นนั้นแหละครับ (ลองดู Firefox หรือ Opera) แต่ในโลกแห่งความเป็นจริง มีบราวเซอร์บางตัวไม่ปฏิบัติตามกฏทำให้เราจำเป็นต้องควบคุมขนาดไว้ ครับ