การวาง layout ของเว็บไซด์ให้อยู่ตรงกลางหน้าด้วย css

วันนี้มาพูดถึงปัญหาอีกอย่างหนึ่งสำหรับคนที่พึ่งเริ่มออกแบบเว็บไซด์กันครับ ซึ่งก็คือ การวางเนื้อหาให้อยู่ตรงกลางหน้านั่นเอง ปัญหานี้จะเกิดกับคนที่ต้องการกำหนดความกว้างของเว็บไซด์ไว้ตายตัวครับ(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”>) ของเราให้อยู่กลางหน้าครับ

body{
	text-align:center;
}
#wrapper{
	margin:0 auto;
	width:800px;
	text-align:left;
}

เป็นอันเสร็จพิธีครับ แค่นี้เราก็จัดให้เนื้อหาอยู่ตรงกลางหน้าได้แล้วครับ โดยที่เนื้อหาทั้งหมดที่จะให้แสดงที่เว็บจะต้องอยู่ภายในแท็ก <div id=”wrapper”> ครับผม