MENU
SVG Modal background Created with Snap
Close
Napište nám

Centrování obsahu v HTML / CSS

Když při tvorbě webu dojde na centrování elementů, mnoha kodérům, zejména těm začínajícím, se orosí čelo a stáhnou půlky.

Čím více informací o centrovaném prvku máme (výška, šířka), tím lépe. Jak ale řešit situace, kdy jeden rozměr elementu neznáme, případně neznáme žádný?

Když při tvorbě webu dojde na centrování elementů, mnoha kodérům, zejména těm začínajícím, se orosí čelo a stáhnou půlky. Čím více informací o centrovaném prvku máme (výška, šířka), tím lépe. Jak ale řešit situace, kdy jeden rozměr elementu neznáme, případně neznáme žádný?

Chce to klid #1 – známe rozměry a rodič se nemění

Pokud známe oba rozměry centrovaného elementu, není prakticky co řešit. Pokud víme, že rozměry rodičovského elementu se měnit nebudou, můžeme element vůči tomuto napozicovat absolutně.

Chce to klid #2 – známe rozměry a rodič se mění

Pokud se rozměry rodičovského elementu mění (např. fluidní layout), vycentrujeme element tak, že rodičovskému elementu nastavíme relativní pozici (abychom vůči němu mohli absolutně pozicovat). Centrovanému elementu potom nastavíme onu absolutní pozici, hodnoty top a left na 50% a hodnoty margin-left a margin-top na (-šířka_elementu/2), resp. (-výška_elementu/2).

Známé rozměry a rodič se nemění


#parent {
background: red;
width: 350px;
height: 280px;
position: relative;
}
#child {
background: blue;
width: 150px;
height: 150px;
position: absolute;
top: 50%;
left: 50%;
margintop:75px;
marginleft:75px;
      }

Jde do tuhýho

Problém nastává v případě, kdy neznáme rozměry centrovaného elementu. První řešení (nebo-li řešení na prasáka) spočívá v použití tabulek. Doporučuji komukoliv, kdo se k tomuto řešení uchýlí, následně spáchat rituální sebevraždu – nejsme v roce 2000.

<table style=„width: 100%;“>
<tr>
<td style=„textalign:
center; verticalalign:
middle;“>
Unknown stuff to be centered.
</td>
</tr>
</table>

O něco lepší (ale ani náhodou elegantní řešení – při použití tohoto řešení doporučuji minimálně vrátit rodný list) je použití DIV elementů, kterým se nastaví chování tabulky a buňky tabulky.

<div class=„parent“>
<div class=„child“>
Unknown stuff to be centered.
</div>
 </div>

.parent { 
display: table;
width: 100%;
}
.child { 
display: tablecell;
textalign:
center;
verticalalign:
middle;
      }

Michał Czernow přišel s geniálním a elegantním řešením (při použití tohoto řešení není nutno se nijak trýznit). Fligna spočívá v použití ghost elementu uvnitř rodičovského elementu, který má výšku 100% (resp. výšku rodičovského elementu). Tomuto ghost elementu a elementu, který chceme vycentrovat nastavíme vertical-align: middle; a dosáhneme stejného efektu. V čem tkví elegance tohoto řešení? Ghost element může být pseudo element!

/* Obalový element s libovolnými rozměry /
.parent { 
textalign:
center;
}
/
Ghost element /
.parent:before { 
content: '';
display: inlineblock;
height: 100%;
verticalalign:
middle;
}
/
Centrovaný element s libovolnými rozměry*/
.centered { 
display: inlineblock;
verticalalign:
middle;
width: 150px; /* nemusí být uvedeno */
      }

Řešení pomocí ghost elementu považuji za best practice. Toto řešení podporují všechny moderní webové prohlížeče a prohlížeče Internet Explorer (od verze 8). Verze 7 a nižší nepodporuje pseudo-elementy (nicméně nepodporuje ani CSS tabulky), tedy v tomto případě je potřeba se vrátit k řešení pomocí tabulek a spáchání rituální sebevraždy.