การจัดวางบล็อกองค์ประกอบใน CSS

คุณสมบัติ margin ไม่เพียงแต่ใช้ สำหรับกำหนดระยะห่างเท่านั้น แต่ยังใช้สำหรับจัดกึ่งกลาง บล็อกองค์ประกอบได้อีกด้วย โดยให้กำหนดค่าระยะห่างขวาและซ้าย เป็นค่า auto

ในตัวอย่างด้านล่าง บล็อกด้านในจะอยู่ตรงกลาง:

<div class="parent">
	<div class="child"></div>
</div>

.parent {
	border: 1px solid red;
}

.child {
	height: 100px;
	width: 200px;
	border: 1px solid green;
	margin: 10px auto;
}

โปรดทราบว่า วิธีการนี้สามารถจัดกึ่งกลางได้ เฉพาะบล็อกองค์ประกอบเท่านั้น, จัดเฉพาะในแนวนอน และเฉพาะเมื่อกำหนดความกว้างให้แล้วเท่านั้น

หากเราต้องการระยะห่างบนและล่างที่ต่างกัน สำหรับ margin, เราสามารถเขียนได้ดังนี้:

.child {
	margin: 30px auto 10px auto;
}

สามารถเขียนใหม่โดยใช้สามค่าได้: ค่าแรก จะกำหนดระยะห่างด้านบน, ค่าที่สามกำหนดระยะห่างด้านล่าง, และ ค่าที่สองกำหนดค่า auto สำหรับระยะห่างขวา และซ้าย:

.child {
	margin: 30px auto 10px;
}

ทำหน้าเว็บตามตัวอย่าง โดยทำให้ บล็อกสีเขียวจัดวางอยู่กึ่งกลาง ของคอนเทนเนอร์หลักของมัน: