CSS-ում բլոկային տարրերի դասավորումը

margin հատկությունը օգտագործվում է ոչ միայն բացվածքներ սահմանելու, այլև բլոկային տարրերը կենտրոնացնելու համար: Դրա համար աջ և ձախ բացվածքները պետք է սահմանել auto արժեքով:

Ստորև բերված օրինակում ներքին բլոկը կկենտրոնանա.

html<div class="parent">
  <div class="child"></div>
</div>

css.parent {
  border: 1px solid red;
}

.child {
  height: 100px;
  width: 200px;
  border: 1px solid green;
  margin: 10px auto;
}

Результат:

Խնդրում ենք նկատի ունենալ, որ այս կերպ կարելի է կենտրոնացնել միայն բլոկային տարրերը, միայն հորիզոնական ուղղությամբ և միայն, եթե նրանց համար սահմանված է լայնություն:

Եթե մեզ անհրաժեշտ են տարբեր վերին և ստորին բացվածքներ margin, ապա կարող ենք գրել այսպես.

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

Կարելի է վերագրել նաև երեք արժեքով. առաջինը կսահմանի վերին բացվածքը, երրորդը` ստորինը, իսկ երկրորդը կսահմանի auto արժեքը աջ և ձախ բացվածքների համար.

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