วันนี้มาพูดถึงปัญหาอีกอย่างหนึ่งสำหรับคนที่พึ่งเริ่มออกแบบเว็บไซด์กันครับ ซึ่งก็คือ การวางเนื้อหาให้อยู่ตรงกลางหน้านั่นเอง ปัญหานี้จะเกิดกับคนที่ต้องการกำหนดความกว้างของเว็บไซด์ไว้ตายตัวครับ(fixed) บางคนพอปรับให้อยู่กลางหน้าได้แล้ว (ดูด้วย IE) โอ้โหอยู่ตรงกลางสวยงามครับ แต่พอไปดูด้วย firefox เอาแล้วไงงานเข้าจนได้ ทำไม๊ทำไมไปชิดซ้ายกันหมดเลยล่ะค๊าบบบ – -a ผมก็เลยนำเอาเทคนิคการจัดการกับ layout ให้อยู่กลางหน้ามาฝาก พร่ำมานานแล้วก็เริ่มกันเลยครับ
[imooh_google_ads]
ก่อนอื่นเราต้องสร้างกำหนดของเขตก่อนว่าจะให้หน้าเว็บของเรากว้างแค่ไหน ด้วยแท็ก div ครับ ผมเอาเป็น 800px ก็แล้วกันนะครับ
<html> <head> <title>Simple center page</title> </head> <body> <div id="wrapper"> blah blah blah ... </div> </body> </html>
จากนั้นก็มาถึงขั้นตอนที่จะใช้ css ให้ตัวขอบเขต(<div id=”wrapper”>) ของเราให้อยู่กลางหน้าครับ
body{
text-align:center;
}
#wrapper{
margin:0 auto;
width:800px;
text-align:left;
}
เป็นอันเสร็จพิธีครับ แค่นี้เราก็จัดให้เนื้อหาอยู่ตรงกลางหน้าได้แล้วครับ โดยที่เนื้อหาทั้งหมดที่จะให้แสดงที่เว็บจะต้องอยู่ภายในแท็ก <div id=”wrapper”> ครับผม