Zarovnanie prvku: ako dať <div> na stred (polopate)

Keď začíname s CSS, najväčší zmätok býva v tom, že „stred“ môže znamenať dve rôzne veci:

Zarovnanie prvku horizontálne obrázok

 

  1. text vnútri prvku je na stred,
  2. samotný prvok (box) je na stred stránky.

A to sú dve rôzne situácie.

1) Základ: <div> je defaultne display: block

To znamená:

  • <div> si zoberie celý riadok,
  • jeho šírka je prakticky 100 % rodiča,
  • ďalší prvok pôjde automaticky pod neho.

Spravíme si ukážku s borderom, aby bolo vidieť samotný box.

HTML

<body>
  <h1>blog</h1>
  <div class="ukazka">Ukážka</div>
</body>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.ukazka {
  border: 1px solid #a50000;
}

Výsledok: uvidíš červený rámik, ktorý ide cez celú šírku stránky. To nie je chyba. To je presne správanie block prvku.

2) Keď je prvok cez celú šírku, „centrovať“ vieme len jeho obsah

Ak má box šírku 100 %, nemá veľmi zmysel „posúvať ho do stredu“, lebo on už zaberá celý priestor.

Čo ale vieme spraviť: dať text vnútri na stred.

.ukazka {
  border: 1px solid #a50000;
  text-align: center;
  padding: 2rem;
}

Box stále ide cez celú šírku, ale text „Ukážka“ je uprostred.

Prvé pravidlo:
Keď je prvok block a zaberá celú šírku, cez text-align centruješ obsah, nie samotný box.

3) Kedy má zmysel „div dať na stred“ ako box?

Až vtedy, keď ten box nie je cez celú šírku.

Čiže keď ho nejako zmenšíme.

To dáva zmysel napríklad pri kartičke, badge, štítku alebo menšom boxe s obsahom, ktorý nechceme roztiahnuť cez celú stránku.

4) Zmenšíme box na šírku obsahu

Jedna jednoduchá možnosť je:

.ukazka {
  display: inline-block;
  border: 1px solid #a50000;
  padding: 2rem;
}

Box už nebude 100 % široký. Bude len taký široký, ako potrebuje.

Lenže teraz prichádza ďalšia vec:

Inline-block sa centruje cez text-align na rodičovi.

5) Keď je prvok zmenšený, musíš povedať, „v čom“ má byť na strede

A toto je kľúčové. Prvok sa necentruje „vo vákuu“, ale vždy v priestore svojho rodiča.

Varianta A: dám text-align: center na rodiča

Rýchla verzia:

body {
  text-align: center;
}

.ukazka bude v strede, pretože je inline-block.

Ale pozor: týmto môžeš vycentrovať aj iné veci v rodičovi, nielen tento jeden box.

Varianta B: obalíme to wrapperom (čistejšie riešenie)

HTML:

<body>
  <h1>blog</h1>

  <div class="center">
    <div class="ukazka">Ukážka</div>
  </div>
</body>

CSS:

.center {
  text-align: center;
}

.ukazka {
  display: inline-block;
  border: 1px solid #a50000;
  padding: 2rem;
}

Takto vycentruješ len tento konkrétny blok. h1 ostane normálne.

Druhé pravidlo:
Keď prvok zmenšíš, potrebuješ rodiča, ktorý určí priestor, v ktorom ho chceš zarovnať.

6) Alternatíva: block prvok + margin: 0 auto

Toto je klasika pre block prvky.

Funguje to vtedy, keď:

  • prvok je block,
  • má nejakú menšiu šírku než rodič.
.ukazka {
  border: 1px solid #a50000;
  padding: 2rem;

  width: fit-content;
  margin: 0 auto;
}

Box sa zmenší na šírku obsahu a potom sa vycentruje pomocou automatických bočných marginov.

Dôležité: margin: 0 auto nefunguje na prvku, ktorý je stále 100 % široký. Najprv musí byť užší než rodič.

Mini-zhrnutie

  • <div> je defaultne block → zaberá celý riadok
  • keď je box 100 % široký → vieš centrovať hlavne obsah cez text-align: center
  • keď chceš centrovať box → musí byť užší než rodič
  • keď je inline-block → centrovanie riešiš cez text-align na rodičovi
  • keď je block a má menšiu šírku → centrovanie riešiš cez margin: 0 auto
  • Centrujem text vnútri → text-align: center na prvok
  • Centrujem box → box musí byť užší a potom buď:
    • margin: 0 auto pre block prvok,
    • alebo text-align: center na rodiča pri inline-block.

 

Súvisí to aj s tým, čo robím

Pozrite sa, s čím viem pomôcť

Ak riešite nový web, úpravy existujúcej stránky alebo audit SEO, GEO, prístupnosti a výkonu, pozrite si moje služby.

Jednoduchý web na mieru

Pre menšie prezentácie, firemné weby a stránky, ktoré majú byť prehľadné, rýchle a ľahko použiteľné.

Pozrieť službu

Zložitejší web na mieru a webová aplikácia

Keď už nestačí len jednoduchá prezentácia a web potrebuje vlastnú logiku, správu dát alebo rozšírené funkcie.

Pozrieť službu

SEO, GEO a prístupnostný audit

Kontrola technického stavu webu, viditeľnosti vo vyhľadávaní, prístupnosti a celkovej použiteľnosti.

Pozrieť službu

Úpravy a rozšírenie webu

Keď web už existuje, ale potrebuje opravy, vylepšenia, zrýchlenie alebo nové časti.

Pozrieť službu
← Späť na blog Pozrieť služby →