Блоктық элементтерді 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;
}

Ұлгі бойынша бетті қайталап, жасыл блоктардың өз ата-анасының ортасына орналасуын жасаңыз: