Penjajaran Elemen Blok dalam CSS

Sifat margin digunakan bukan sahaja untuk menetapkan jarak, tetapi juga untuk memusatkan elemen blok. Untuk ini, jarak kanan dan kiri perlu ditetapkan kepada nilai auto.

Dalam contoh di bawah, blok dalam akan berada di tengah:

<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;
}

Perlu diingat, dengan cara ini anda hanya boleh memusatkan elemen blok, hanya secara mendatar dan hanya jika lebarnya ditetapkan.

Jika kita memerlukan jarak atas dan bawah yang berbeza margin, maka kita boleh menulis seperti ini:

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

Ia juga boleh ditulis semula dengan tiga nilai: yang pertama akan menetapkan jarak atas, yang ketiga - bawah, dan yang kedua akan menetapkan nilai auto untuk jarak kanan dan kiri:

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

Ulang halaman mengikut contoh, buat supaya blok hijau terletak di tengah induknya: