6.3. Centrování elementů

Častým problémem v kódování rozvržení stránky je její vycentrování. Dát prohlížeči pokyn, aby prvky zobrazoval v určitém místě, se může zdát složité, vzhledem k různým velikostem monitorů.

V této části se vám pokusíme ukázat, jak se tohoto úkonu chopit. Pokud si vzpomenete na sedmý úkol, část řešení zde byla již dopředu připravena.

To, jakou techniku centrování použijeme záleží do značné míry na tom, jestli se jedná o element blokový, nebo řádkový.

• Jak vycentrovat blokový element? Stačí nám řici šířku prvku, a oznámit prohlížeči, že si má odsazení z levé a pravé strany má dopočítat.

<div class="container">
  <div class="center-me">
    Jsem blokový element.
  </div>
</div>

.center-me {
  background: lightgreen;
  height: 100px;
  width: 300px;
  margin: 0 auto; /* Oznámí prohlížeči, že pravé a levé odsazení si má vypočítat. */
}

• Pokud se jedná o řádkový prvek (nebo inline-block), použití automaticky vypočteného odsazení se nepoužívá. Místo toho se centruje pomocí vlastnosti text-align: center;.

<div class="container">
  <div class="center-me">
    Jsem řádkový element.
  </div>
</div>

/*
Všimněte si, že vycentrování je použito na nadřazeném prvku.
Vlastnost text-align totiž ovlivňuje vnitřek elementu, ne element jako takový.
*/
.container {
  text-align: center;
}

.center-me {
  display: inline-block;
  background: lightgreen;
  height: 100px;
  width: 300px;
}

Prvky je možné také centrovat vertikálně, nicméně se jedná o trochu složitější, a méně používanou techniku. V tomto kurzu ji více nebudeme rozebírat, nicméně na internetu je možné najít mnoho návodů a článků, jak vertikální zarovnávání prvků provádět.