Zarovnání blokových prvků v CSS

Vlastnost margin se nepoužívá pouze pro nastavení odsazení, ale také pro centrování blokových prvků. K tomu je třeba nastavit pravý a levý odsazení na hodnotu auto.

V následujícím příkladu se vnitřní blok umístí na střed:

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

Результат:

Mějte na paměti, že tímto způsobem lze centrovat pouze blokové prvky, pouze vodorovně a pouze pokud mají nastavenou šířku.

Pokud potřebujeme různé horní a dolní odsazení margin, lze to napsat takto:

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

Lze to také přepsat pomocí tří hodnot: první nastaví horní odsazení, třetí - dolní odsazení a druhá nastaví hodnotu auto pro pravý a levý odsazení:

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