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

Կրկնեք էջը ըստ նմուշի, այնպես դարձնելով, որ կանաչ բլոկները տեղադրվեն իրենց ծնողի կենտրոնում.