Выраўноўванне блачных элементаў у 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;
}

Паўтарыце старонку па ўзоры, зрабіўшы так, каб зялёныя блокі размяшчаліся па цэнтры свайго бацькі: