網頁文字在DIV+CSS布局中垂直置中的問題

css|網頁|問題

1.單行文字

設定div的高度與文字的行高一樣就可以了,即 line-height 和 height 的數值是一樣的就可以了,最後給div一個 over-flow: hidden ,讓超出的部分隱藏.

這種方法支援塊級和內聯極元素以及所有的瀏覽器,不過只能顯示一行,而且IE中不支援< img >等的置中,之所以要用 overflow: hidden ,是因為當使用者放大字型時,字會超出div的範圍.

div{
height: 20px;
line-height: 20px;
overflow: hidden;
}

2.多行文字

很簡單,只要設定一樣的 padding-bottom 和 padding-top 就可以了

div{
padding-top: 20px;
padding-bottom: 20px;
}

這種方法同時支援塊級和內聯極元素以及非常值內容,包括圖片等等,也支援所有瀏覽器,不足的就是不能固定高度

現在比較好用的就著兩種方法了,當然還可以利用瀏覽器的CSS hack,用得比較少,就不多講了.