Zarovnanie blokových elementov v CSS

Vlastnosť margin sa nepoužíva len na nastavenie odsadenia, ale aj na centrovanie blokových elementov. Na to treba nastaviť pravé a ľavé odsadenie na hodnotu auto.

V príklade nižšie sa vnútorný blok vycentruje:

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

Результат:

Majte na pamäti, že takto je možné centrovanie len blokových elementov, len horizontálne a len v prípade, že majú nastavenú šírku.

Ak potrebujeme rôzne horné a dolné odsadenie margin, môžeme napísať takto:

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

Je možné to prepísať aj cez tri hodnoty: prvá nastaví horné odsadenie, tretia - dolné, a druhá nastaví hodnotu auto pre pravé a ľavé odsadenie:

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