Moderní tvorba webových aplikací

O webu

Psát margin: auto, nebo margin: 0 auto?

CSS konstrukce margin: auto se obvykle používá pro vodorovné centrování bloku.

2 minuty

Má-li nějaký blokový element nastavenou šířku, jde ho pomocí levého a pravého marginu nastaveného na hodnotu auto vodorovně vycentrovat.

Často je k vidění, že někdo centrování marginem zapisuje předpisem margin: 0 auto. Přitom nula pro horní a spodní odsazení se stejně tak aplikuje při hodnotě auto pro všechny strany. Zápis margin: 0 auto je tedy zbytečně komplikovaný a stačí použít:

.centrovany {
  margin: auto;
}

Výsledek je stejný. Tedy margin-top a margin-bottom budou nulové a element bude umístěn uprostřed.

Nejspíš jediná výjimka, kdy se výsledek margin: auto a margin: 0 auto liší, je centrování absolutním posicováním.

Zachování původního marginu

Pokud je cílem element pouze vycentrovat a zachovat původní hodnoty odsazení, nabízí se dvě možnosti:

  1. Přepsat pouze krají hodnoty:

    .centrovany {
      margin-left: auto;
      margin-right: auto;
    }
  2. Využít klíčového slova inherit. Funkční od IE 8.

    .centrovany {
      margin: inherit auto;
    }

    Hodnota inherit způsobí, že se hodnota podědí.

Související články

Má smysl měnit kursor tlačítek?

Tlačítka mají na webu po najetí jiný kursor než odkazy.

4 minuty

Stylování <input type=number>

Jak stylovat <input> pro zadávání čísel.

7 minut

Znázornění možnosti scrollování

Jak dát uživateli informaci, že je možné někam scrollovat.

10 minut

Plynulé scrollování na obsah

Jak vytvořit plynulé odrolování na určitou část stránky.

6 minut

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025