Šta je DIV? 

“HTML Content Division element” ( <div> ) je gradivni blok web strane. U našem tekstu saznajte četiri načina kako pozicionirati div element na stranici web sajta. 

Kao što je cigla gradivni deo zida, tako div predstavlja ”ciglu” u izgradnji web stranica.

Div je kontejner za sve elemente. U njega se ubacuje još div elemenata i svi drugi elementi mogu da idu u njega. 

Kako pozicionirati DIV na stranici sajta?

Predstavićemo vam četiri razlilčite metode kojima možete da pozcionirate div element na stanici sajta.

1. metoda – korišćenje “flex layout“

Flex layout je najbrzi način da se više elemenata stavi u jedan div.

.child-div {

display:flex;

justify-content: center;

  align-items: center;

}

2. metoda –  margin auto 

Brzo i jednostavno rešenje, ali ima svoja ograničenja.Samo za elemente koji imaju definisanu širinu. Parent div mora da sadrži text-align: center;. Ne sme da ima position fixed ili absolute.

Više o pozicioniranju elemenata u CSS-u možete pročitati ovde.

Ne možemo ga koristiti za vertikalno poravnanje.

.child-div {

background: url(“logo.png”) no-repeat;

background-size: 100%;

width: 200px;

height: 200px;

border-radius: 50%;

margin: 0 auto; 

}

3. metoda – kombinacija text-align i inline-block

Razlika između 2. i 3. metode, je što width ne treba da bude definisan. Takođe ni ovde ne možemo koristiti vertikalno poravnanje.

.child-div {

background: url(“logo.png”) no-repeat; 

background-size: 100%;

width: 200px;

height: 200px;

border-radius: 50%;

display: inline-block;

}

4. metoda – 2D Transform

Position, top i left i transform div će biti uvek na sredini ekrana (horizontalno i vertikalno).

Div će biti preko svih drugih elemenata (zbog apsolutne pozicije). Širina i visina moraju biti definisani takodje.

.child-div {

bacground: url(“logo.png”) no-repeat;

background-size: 100%;

widht: 200px;

height: 200px;

border-radius: 50%;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%); 

}

Za još vesti i interesantnih priča iz digitalnog marketinga posetite našu blog stranu ili zapratite naš Instagram profil.