Jednou z najčastejšie vykonávaných činností pri tvorbe internetových stránok je horizontálne centrovanie elementov. Vďaka centrovaniu elementov je možné umiestniť obsah webu do stredu okna internetového prehliadača. Horizontálne centrovanie je použité aj v tomto projekte. Pre aplikovanie horizontálneho centrovania stačí použiť pravidlo margin : auto;. Hodnota auto sa musí vzťahovať pre ľavú a pravú stranu. Je ju možné kombinovať aj s rôznymi hodnotami pre dolnú a hornú stranu. Nasledujúce príklady demonštrované spôsoby horizontálneho centrovania elementov. Príklad: Zápis do elementu <body>.
1
2
3
4
5
6
7
8
<section>
<section>
<section>
<section>
</section>
</section>
</section>
</section>
Príklad: Zápis do elementu <style>.
1
2
3
4
5
6
section {
outline : 2px solid black;
width : 60%;
height : 200px;
margin : auto;
}
Uvedené zápisy vycentrujú štyri elementy <section>. V tomto prípade je hodnota auto aplikovaná pre všetky smery. Ďalší príklad demonštruje kombináciu hodnoty auto s ďalšími jednotkami.Príklad: Kombinácia hodnôt auto s hodnotami 4px a 2px.
1
2
3
4
5
6
section {
border : 2px solid black;
width : 60%;
height : 200px;
margin : 4px auto 2px auto;
}
Záver
Uvedený postup demonštruje iba horizontálne centrovanie. Centrovanie celého elementu na stred, teda horizontálne aj vertikálne, bude uvedené v niektorom z ďalších článkov.22.5.2013, Matej LednárCategory: CSSCSS,programovanie,center,horizontal,element,margin,autoNo part of this article may be reproduced without mention of the author and URL to this website.For more information, see the About section.
