line-height的使用

行高指的是兩條基線之間的距離，即内容區域和兩個半行間距的累加

1.圖檔水準垂直居中

.box {line-height:300px;text-align:center;}

.box > img {vertical-align:middle;}

但是該效果受box類裡面的文字大小影響，文字的size越大，圖檔為了和文字的基線對齊，圖檔越是下沉，如果想達到較好的圖檔居中效果，box的font-size:0px;才能實作真正的垂直居中

2.多行文本水準垂直居中

.box {line-height:250px;text-align:center;}

.box > .text {display:inline-block;line-height:normal;text-align:left;vertical-align:middle;max-width:100%;}

3.ie6/ie7上面設定行高代替高度，可以避免haslayout現象

4.清除圖檔下方的間隙

a.圖檔塊狀化-無基線對齊

img {display:block;}

b.圖檔底線對齊

img {vertical-align:bottom;}

c.行高足夠小，圖檔基線位置上移

.box {line-height:0;}

d.如果盒子裡面沒有文字

.box {font-size:0px;}

5.小圖檔大文字

用vertical-align屬性控制圖檔的位置