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

Převod písmen na VELKÁ a malá

Převedení textu na velká nebo malá písmena.

12 minut

Možnosti stylování <iframe>

Co lze a nelze u <iframe> ovlivnit pomocí CSS a jak na změnu textu nebo barev.

10 minut

Zvýraznění aktivní sekce při rolování

Moderní způsoby zvýraznění aktivní položky navigace podle aktuální sekce – CSS i IntersectionObserver.

5 minut

CSS funkce random()

Jak v CSS generovat náhodné hodnoty pomocí random() a kdy ji použít.

6 minut

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