NEDSCHOOLDEV

view_headline menu
yt yt yt

CSS

CSS CSS Uvod CSS Upotreba CSS Boje CSS Pozadine CSS Borders CSS Margine CSS Padding CSS Height/Width CSS Float CSS Tekst CSS Font CSS Poravnanje CSS Linkovi CSS Liste CSS Tabele CSS Ikone








CSS Poravnanje elemnata

<< >>



Š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

div {
     margin: auto;
}



Centriranje teksta


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


Ovaj tekst je centriran

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;


wally

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;

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;

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.

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.

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



<< >>



© Copyright 2018. nedschool.com