WEBnSTUDY.com
CSS

CSS vertikalno poravnanje

Vertikalno poravnanje se često upotrebljava na pogrešan način.

vertical-align Podešavanje poravnanja / centriranja po vertikali.

Ovaj atribut definiše dva potpuno različita ponašanja, zavisno od toga na kakvom elementu se primenjuje (inline-elementi ili ćelije tabele).

vertical-align: middle;

Ćelije tabele

Kada se atribut primenjuje na ćelijama tabele, odnosi se na poravnanje sadržaja unutar tabele. Moguće vrednosti su:

Ćelije tabele


  td {
    vertical-align: middle;
  }

Inline elementi

Kada se atribut primenjuje na inline elemente, odnosi se na poravnanje celog elementa u odnosu na osnovnu liniju teksta nadređenog elementa. Moguće vrednosti su:

vertical-align: super; vertical-align: 4px; vertical-align: -20%;

Inline elementi


  div {
    display: inline-block;
    vertical-align: text-bottom;
  }

U primeru je zadata podvučena linija teksta (da bi se videla osnovna linija nadređenog elementa) i sa veoma povećanom visinom linije da bi se videlo ponašanje inline elemenata. Vidi se da je baseline podešavanje ustvari default ponašanje elemenata (poravananje prema osnovnoj liniji teksta). Podešavanja text-top i text-bottom se ponašaju kako je opisano. Podešavanje top će poravnati vrh elementa sa vrhom linije, middle će smestiti element na sredinu linije, dok će bottom poravnati dno elementa sa dnom linije.

Svi elementi sajta Web'n'Study, osim onih za koje je navedeno da su u javnom vlasništvu, vlasništvo su autora i ne smeju se koristiti, u celosti ili delimično bez pismenog odobrenja autora. To uključuje tekstove, slike, ilustracije, animacije, prateći grafički materijal i programski kod.
Ovaj sajt koristi tehnologiju kolačića (cookies) radi vođenja interne statistike u cilju unapređenja korisničkog iskustva. Tako prikupljeni podaci su anonimni i nedostupni trećim licima. Vaša privatnost nije ugrožena ni na koji način.