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

• ak nastavíme nejakému obaľovaciemu elementu napríklad DIVu position: relative; zmeníme tým východzí bod pre ďalšie elementy umiestňované absolútne vo vnútri toho elementu
• ak nastavíme nejakému elementu (ktorý je vnorený napríklad do DIVu ktorý ale nemá nastavené position relative) tak vtedy môžete pohybovať relatívne s ľubovoľným elementom pomocou top, bottom, left, right

Zdá sa to zložité?

Asi sa to zdá zložité ale vôbec nieje, len sa to trochu blbo vysvetľuje ale skúsim to na obrázkoch.

Proste a jednoducho, keď dám niečomu position: absolute a napríklad top: 0; left: 0; tak sa to zobrazí v ľavom hornom rohu prehliadača. Ak ale element v ktorom mi používame toto position absolute má nastavený position: relative tak sa deje presne to isté ako o pár svoj vyššie ale element je umiestnený v ľavom hormon rohu toho elementu ktorý má definované práve to position relative. Tým position relative len zmeníme východzí bod pre umiestňovanie.

Čo sa stane keď dáte nejakému elementu position: absolute?

Odkazu nastavíte:

#mojdiv {
  background: red;
  /* tento kus kódu len vycentruje DIV a
  nastaví mu pevné rozmery */
  width: 300px;
  height: 100px;
  margin: 150px auto 0 auto;
}  

#mojodkaz {
<strong>  position: absolute;</strong>
  top: 0;
  left: 0;
  background: green;
}

Kde bude umiestnený odkaz?

Odkaz sa zobrazí v ľavom hornom rohu prehliadača a je jedno v akom DIVe je alebo ako hlboko je vnorený v kóde. Implicitne sa všetky elementy zobrazujú v ľavom hornom rohu prehliadača.

Čo robí position: relative?

Position: relative zmení východzí bod pre absolútne poziciovanie z ľavého horného rohu prehliadača na ľavý horný roh elementu ktorému definujete práve to position: relative. Elementy z predchádzajúceho príkladu by sa zobrazovali nejak takto ak by sme červenému DIVu definovali position: relative.

Okrem zmeny východzieho bodu môžete použiť position: relative aj na zmenu pozície elementu z jeho aktuálnej polohy. Pomocou top, left, right a bottom môžeme s elementom hýbať ľubovoľne z jeho aktuálnej pozície.

Podobné články

• 14. Júl 2008 -- Ako horizontálne vycentrovať obsah – DIV na stred v 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