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