Ako horizontálne vycentrovať obsah – DIV na stred v CSS?

Veľmi často vidím na fórach stále tú istú otázku ohľadom CSS a centrovania a to: "Ako mám vycentrovať DIV?". Tento článoček je o tom ako to docieliť, primárne sú 2 spôsoby ako to spraviť.

Uvedieme si dva spôsoby ako centrovať obsah ktoré sa od seba dosť líšia. V praxi ale nieje úplne ideálne riešenie ktoré by všade fungovalo bez problémov. Hlavne kvôli IE6 (najlepšiemu prehliadaču na svete) je potreba byť opatrnejší pretože ohľadom centrovania je IE6 častokrát ťažko zlúčiteľné.

Spôsob horizontálneho centrovania pomocou position: absolute

Jeden zo spôsobov horizontálneho vycentrovania obsahu je , že celý obsah je obalený DIVom ktorý má určenú pevnú šírku v pixeloch. Obalovací DIV je pritom najvrchnejší obalovací element. Pre jeho vycentrovanie zadefinujeme takéto CSS:

#container {
<strong>  width: 500px;</strong>
  background: red;<strong>
  position: absolute;
  left: 50%;
  margin-left: -250px;</strong>
}

Spôsob horizontálneho centrovania pomocou margin: auto

Centrovanie obsahu pomocou margin: auto je ten vhodnejší spôsob centrovania ktorého by som sa držal i keď si to vyžaduje možno viac písania a optimalizovania. Tu budeme ale okrem jedného obaľovacieho DIVu používať dva obaľovacie DIVy. Prečo? Preto, že niektoré prehliadače pri centrovaní obsahu pomocou margin: auto sa nerozoztiahnu po celej výške - neobtečú a neroztiahnu DIV a teda ak má tento DIV farebné pozadie prípadne ako pozadie obrázok tak ho nemáme po celej výške.

Znie to divne? Možno ale my s tým nič nespravíme a ak budeme chcieť aby to bolo rovnaké vo všetkých browsroch tak sa s tým budeme musieť zmieriť. Urobíme tzv. matriošku čo sú naše dva obaľovacie DIVy.

Jeden bude centrovať pomocou margin: auto a text-align: center na stred a druhý ktorý je vnorený dovnútra bude obsahovať float a prípadné pozadie. CSSsko by mohlo vyzerat nejak takto:

body {
  text-align: center;
}

#obsah-vonku {
  display: block;
  <strong>width: 500px;
  margin: 0 auto;</strong>
}

#obsah-dnu {
  <strong>float: left;</strong>
  width: 100%;
  margin: 0;
  background: red;
  text-align: left;
}

Prečo používame na centrovanie dva DIVy?

Ako som písal vyššie robíme to kvôli riešeniu problému zobrazovania farebného pozadia. Problém je v tom, že ak centrujeme div pomocou margin: auto tak nemusí obsah obtekať. To sa dá ľahko vyriešiť pomocou float: left ale použiť naraz float a margin: auto nejde pretože float by náš obsah zarovnal k nejakému rohu a to predsa nechceme lebo centrujeme na stred.

Proste a jednoducho... dva DIVy. Jeden má definované margin: 0 auto; (ide hlavne o margin left a right aby bol auto) s danou šírkou. Toto nám to dá na stred. Druhý div má float: left aby prípadné pozadie sa roztiahlo podľa obsahu na celú výšku. Celá veda

Podobné články

• 13. Júl 2008 -- Relatívne a absolútne poziciovanie v Cascading Style Sheets (CSS)
• 10. August 2010 -- CSS3 v praxi: rotácia elementov pre všetky prehliadače (IE5.5+)
• 28. August 2008 -- Internet Explorer 6 je brzda internetu