KAKO DA poravnate vertikalne liste za navigaciju sa više linija

Predstavićemo vam brz trik za poravnanje vertikalnih lista  za navigaciju koje koriste uobičajeni pristup plutajućeg okvira za prikaz liste  u redu, ali imaju nekoliko stavki koje su prikazane preko više linija.

Pretpostavimo da imate sledeći CSS kod za listu navigacije  od jedne linije:

#nav li {
  display: block;
  height: 3em;
  margin: 0 3px;
  padding: 3px 7px;
  background: Khaki;
  float: left;
  }

Koji je primenjen na sledeći HTML kod:

 
• Item one
   
• Item two
   
• Large third
  item
   
• The Fourth
   
• Very large
  fifth item
   

Ako želite da ga modifikujete za vertikalno poravnanje  stavki koje imaju i jednu i više linija, logički pristup je da upotrebite  atribut vertical-align. Međutim, ovo baš i nije najbolje rešenje.

Problem je što vertical-align centrira vertikalno elemente u  liniji ali u odnosu na najviši element svake linije.
 

Postoji još jedan atribut koji će vam pomoći da rešite ovaj  problem: line-height. Ako je visina linije bloka jednaka sa njegovom visinom,  tagovi unutar bloka koji imaju samo liniju su vertikalno centrirani. Ali  postoje i blokovi sa više linija tako da treba da podesite visinu tih blokova  na visinu_bloka / broj_linija, tako da dodata visina linija bude jednaka sa  visinom bloka.

Uzmimo primer gde imamo blokove sa dve linije tako da treba  da podesite visinu linije datih elemenata na polovinu visine bloka. Novi kod za  ovo bi bio nešto slično sledećem:

CSS

#nav-fixed li {
  display: block;
  height: 3em;
  margin: 0 3px;
  padding: 3px 7px;
  background: Khaki;
  float: left;
  text-align: center;
  line-height: 3em;
  }

#nav-fixed .double-line {
  line-height: 1.5em;
  }

HTML

 
• Item one
   
• Item two
    Large  third
  item
   
• The Fourth
    Very  large
  fifth item
   

 Preporuka - Camera RAW studijske tehnike - kolorna knjiga

Kolorna knjiga na 340 strana. Korak dalje u radu sa digitalnom fotografijom. Profesionalni fotografi koji su usvojili RAW fotografiju i Camera Raw tehnike za obradu fotografija smatraju da RAW predstavlja novu revoluciju u fotografiji. RAW vam nudi kontrolu nad kvalitetom fotografije koja do sada nije viđena, dozvoljavajući vam da podignete obradu fotografija u neslućene visine. Na ovim stranicama, jedanaest vrhunskih fotografa deli sa vama savete i tehnike koje su usavršili kako bi izvukli maksimum iz fotografija. Pratite njihove savete, i garantujemo vam da ćete svaki put dobiti profesionalne rezultate prilikom obrade fotografija.

Link ka knjizi i korpi za naručivanje.