CSS Poravnanje elemenata

undo redo

Šta omogućava CSS Poravnanje?

CSS poravnanje omogućava poravnanje elemenata u horizontalnoj ili vertikalnoj osi.

Raspored elemenata na stranici može biti različit, a dobar raspored znači i dobra stranica.

Elementi mogu biti centrirani, poravnati horizontalno (lijevo i desno) ili vertikalno (gore i dolje)

Centriranje

Centriranje podrazumijeva da se element nalazi na jednakoj udaljenosti sa lijeve i desne strane (margine).

Centriranje se vrši tako što koristimo parametar margin: auto;

Ovaj div elemnt je centriran

CSS

div {
margin: auto;
}

Centriranje teksta

Za centriranje teksta koristi se parametar text-align: center;

Ovaj tekst je centriran

CSS

div {
text-align: center;
border: 2px solid #4682B4;
}

Centriranje slike

Za centriranje slike postavi se margin-left i margin-right parametar na auto i display: block;

CSS

div {
     margin-left: auto;
     margin-right: auto;
     display: block;
}

Horizontalno poravnanje

Horizontalno poravnanje se može učiniti kroz nekoliko metoda.

Parametar position

Pomoću parametra position možemo poravnati element tako što postavimo sljedeću vrijednost: position: absolute;

Position: absolute; right: 0px;

CSS

div {
     position: absolute;
     right: 0px;
     border: 2px solid #4682B4;;
}

Parametar float

Pomoću parametra position možemo poravnati element tako što postavimo sljedeću vrijednost: position: absolute;

float: right;

CSS

div {
     float: left;
     right: 0px;
     border: 2px solid #4682B4;;
}

Vertikalno poravnanje

Vertikalno poravnanje se najčešće radi pomoću parametra padding ili line-hight

Parametar padding

Pomoću parametra padding možemo poravnati element tako što odredimo padding za gornji i donji dio elementa.

Ovaj paragraf ima postavljen padding 50px gore i dole.

CSS

div {
     padding: 50px 0px;
     text-align: center;
     border: 2px solid #4682B4;
}

Parametar line-hight

Drugi način kako možemo poravnati element je tako što odredimo line-hight koji ima vrijednost istu kao i visina (height).

Ovaj paragraf ima postavljen padding 50px gore i dole.

CSS

div {
     line-hight: 100px;
     height: 100px;
     border: 2px solid #4682B4;
}

undo redo

w3sedic