×
Vytvárame riešenia

Ako horizontálne centrovať element

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.
Autor: Matej Lednár
Dátum: 22.5.2013
Kategória: CSS
Značky: programovanie, center, horizontal, element, margin, auto


CSS,programovanie,center,horizontal,element,margin,auto
Žiadna časť tohto článku nesmie byť reprodukovaná bez uvedenia autora a URL na túto stránku.
Viac informácií nájdete v sekcii O projekte.

Komentáre

Článok neobsahuje zatiaľ žiadne komentáre.

Pridať komentár

Meno (povinné)
Web
Správa (povinné)
Odoslať
Od najnovších