jajozeldev.eu

Ako dať prvok, napríklad v <div> na stred.

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

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

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

A to sú dve úplne iné pravidlá.

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

To znamená:

<div> si zoberie celý riadok
čiže jeho šírka je (prakticky) 100% rodiča
ďalší prvok pôjde automaticky pod neho

Spravíme si ukážku s borderom, aby bolo vidieť “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 to, čo robí block.

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

Ak má box šírku 100%, tak ho nemá zmysel “posúvať do stredu” — lebo on už je všade.

Č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 nápis „Ukážka“ je uprostred. Padding-om (vnútornými okrajmi) sme si len zväčšili prvok.

Toto je prvé pravidlo:
Keď je prvok block a zaberá celú šírku, centrovanie riešime cez text-align (centruje obsah, nie 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 “zmenšíme”.

A prečo ho zmenšovať?
Lebo keď chceš mať napríklad “kartičku”, “badge”, “štítok”, “box s obsahom” — nechceš, aby to bolo roztiahnuté cez celú stránku.

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

Najjednoduchší trik:

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

Box už nebude 100% široký. Bude “tak veľký, ako potrebuje”.

Lenže teraz vzniká ďalšia vec:

Inline-block sa centrovať dá cez text-align, ale na rodičovi.

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

- a to je kľúčové.

Varianta A: dám `text-align: center` na rodiča - `body` (rýchle, ale môže centrovať všetko)

body {
  text-align: center;
}

.ukazka bude v strede, lebo je inline-block.
Ale pozor: budeš centrovať aj iné veci v body (texty, linky…).

Varianta B: obalíme to wrapperom (obalom, <div class="center">, čisté 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;
}

Len tento jeden blok bude centrovaný.
h1 ostane normálne.

Druhé pravidlo:
Keď prvok zmenšíš (napr. inline-block), musíš centrovanie riešiť cez rodiča — lebo rodič je tá “plocha”, v ktorej sa to má zarovnať.

6) Alternatíva: zmenším box a vycentrujem ho cez `margin: 0 auto`

Toto je “klasika” pre bloky.
Funguje, ak:

prvok je block
„margin: 0 auto funguje len keď prvok nie je 100% široký (t.j. má šírku/je zmenšený).“

.ukazka {
  border: 1px solid #a50000;
  padding: 2rem;

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

Box sa zmenší na šírku obsahu a posunie sa na stred.

Mini-zhrnutie (čo si zapamätať)

<div> je defaultne block → zaberá celý riadok
keď je box 100% široký → centrovať vieš hlavne obsah (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 so šírkou → centrovanie riešiš cez margin: 0 auto
Centrujem text vnútri → text-align: center na prvok
Centrujem box → box musí byť užší a buď:
- margin: 0 auto (block + šírka)
- alebo text-align: center na rodiča (inline-block)

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

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