Penyelarasan Elemen Blok di CSS

Properti margin tidak hanya diterapkan untuk mengatur jarak, tetapi juga untuk melakukan sentrisasi elemen blok. Untuk melakukan ini, jarak kanan dan kiri harus diatur ke nilai auto.

Dalam contoh di bawah, blok bagian dalam akan menjadi 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, bahwa dengan cara ini kita hanya dapat melakukan sentrisasi elemen blok, hanya secara horizontal dan hanya, jika lebarnya telah ditentukan.

Jika kita membutuhkan jarak atas dan bawah yang berbeda margin, maka kita dapat menulisnya seperti ini:

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

Dapat juga ditulis ulang dengan tiga nilai: nilai pertama akan mengatur jarak atas, nilai ketiga - jarak bawah, dan nilai kedua akan mengatur nilai auto untuk jarak kanan dan kiri:

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

Ulangi halaman sesuai contoh, buatlah agar blok hijau terletak di tengah induknya: