Guarda l'articolo esplicativo

Allineamento verticale

Proprietà "vertical-align"

Baseline (linea base)

allinea l'elemento alla linea base dell'elemento contiguo

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Bottom

l'elemento viene allineato con il più basso degli elementi della linea

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Middle

l'elemento viene piazzato al centro dell'elemento contenitore

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Sub

pedice

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Super

apice

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Text-bottom

l'elemento viene allineato con la parte bassa della linea di testo

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Text-top

l'elemento viene allineato con la parte alta della linea di testo

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Top

l'elemento viene allineato con il più alto degli elementi della linea

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

-5px

il tal caso viene allineato secondo il valore indicato. accetta anche valori negativi

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

150%

allinea l'elemento di un x% rispetto al valore del line-height dichiarato.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Menu con immagine di sfondo

Senza CSS

Con i CSS senza allineamento verticale

Css:

 ul {list-style-type:none;}
  ul li {float:left; background:transparent url('bg-vert-align.gif') top center; 
   width:100px; height:30px; text-align:center; 
  }	
   ul li a {font-size:12px; color:#111; text-decoration:none; }
    ul li a:hover {font-size:12px; color:#FFF; font-weight:bold;}

Con allineamento verticale

Css:

 ul {list-style-type:none;}
  ul li {float:left; line-height:30px; background:transparent url('bg-vert-align.gif') top center; 
   width:100px; height:30px; text-align:center; 
  }
   ul li a {font-size:12px; color:#111; text-decoration:none; }
    ul li a:hover {font-size:12px; color:#FFF; font-weight:bold;}