Ponavadi smo besedilo centrirali s pomočjo HTML značke <center>. Vse bolj pa se uporablja centriranje s pomočjo CSSja. Slednjega lahko uporabljamo na več različnih načinov.

Horizontalno centriranje

Besedilo ponavadi centriramo s pomočjo “text-aligna”. Če želimo centrirati tako imenovane “inline” elemente moramo dodati še “display:block”. Slednje pomaga brskalniku ugotoviti meje elementa na podlagi katerih določi centriranje. Primer “inline” elementa je slika oziroma IMG značka. Za centriranje elementov, ki niso tekstualni pa si pomagamo z “margin”.

Primer kode za besedilo:

.centriranje {
text-align: center;
display: block; /*--Za inline elemente--*/
}


Horizontalno centriranje lahko, tako dosežemo z  nastavitvami levega in desnega “margin: 0 aouto;”. Slednja metoda se uporablja za grafike ali pa za grajenje templajtov. Pri templajtih moramo dodati še širino, da bo koda delovala.

Primer kode za templajte:

.template_centriranje {
margin: 0 auto;
width: 560px;
}


Primer kode za slike:

img.centriranje {
margin: 0 auto;
display: block;
}


Vertikalno centriranje

Vertikalno lahko centriramo tekstualne elemente, če uporabimo “line-hight”, tako brskalnik sam določi centriranje na podlagi višine vrstice. Poleg “line-highta” moramo določi še višino elementa, ki mora biti enaka “line-hightu”.

Primer kode:
h1 {
font-size: 16px;
height: 80px;
line-height: 80px;
}


Za vertikalno centriranje ostalih elementov pa uporabimo atribut “absolute positioning”. Pri tem pa moramo določiti natančno širino in višino elementa, ki ga želimo centrirati.

Pri uporabi atributa “position:absolute” se element pozicionira glede na primarno pozicijo, ki je levo zgoraj v koordinati 0,0. Da dosežemo center pa moramo elementu dodati negativni “margin”. Primer: če imamo element širok 500px in visok 400px, moramo dodati -250px levega margina(left:margin:-250px;) in 200px top margina(top-margin:-200px;).

Poglejmo si še primer poravnave.

.vertical {
width: 500px; /*--Doloèitev širine--*/
height: 400px; /*--Doloèitev višina--*/
position: absolute; /*--Pozicioniranje absolute--*/
top: 50%; /*--50% zgoraj--*/
left: 50%; /*--50% levo--*/
margin: -250px 0 0 -200px; /*--negativni margin zgoraj in levo--*/
}


Dodatne informacije: http://www.w3.org/Style/Examples/007/center