[ CSS ] line-height 與垂直居中!
在此之前,對於line-height 與垂直居中的問題,經常碰到。
比如,圖片與span在同一個box中的時候,竟然會各種偏移。要想達到理想的效果真的是各種難。
有時間,決定認真的啃一啃。
一 line-heigth:
1. line-height: 顧名思義,行高,指代文字中,行與行之間的基線間的距離。
2. 基線: 這裡的基線不是指代文字的底部,而是英文字母x 的下沿。
3 行距: 行距表示文字的高度與行高的差距。
4. 內容區域: 行中每一個元素都有一快內容區域,主要由字型的大小決定。
5 行內框: 在預設條件下,行內框是等於內容區域的。在如果設定了行高,那麼,行內框就會等於行高,並且在內容區域的兩側新增空白。
6 行框: 行框在預設條件下是等於行內框,但是如果在同一行中,有行高超過了當前元素的行內框高度的時候,當前元素的行框就會預設為最高的行高的高度。
這裡的行框的告訴只與本行中的最高的行高的關,與關元素的告訴無關。這也是導致圖片和文字在同一行時不能對齊的原因。
7 在有圖片時,圖片會將行框的高度撐到圖片的高度,但同時預設的對其方式為基級對齊方式。
具體如下圖所示:
二 vertical-align
垂直居中,這裡需要注意的一點就是,vertical-align 只能對行內元素有效,對說類似div,p之類的塊級元素是無效的。
需要垂直居中,只需要:vertical-align:middel
三 zoom
曾經一直很奇怪很多的網站為什麼給元素總是要加一個zoom:1的樣式。
原來這一切都是為了相容ie 6/7/8 , 用來觸發ie的haslayout內部屬性。導致ie重新計算自身的高度。
大多數因為浮動所產生和定位問題bug 都可以用zoom來解決。
四 inline-block
inline屬性的特點是,行內元素,能夠在同一行內顯示,但是其高度,寬度,行高,margin,padding 等元素都不能設定。所以就產生了inline-block;
inline-block行內元素,但不失block 的效果。在是在ie 6/7下沒有被完全支援。
關於ie 6/7對於 inline-block的不完全支援,也可以採用上面的方法解決。
如:
display:inline-block; *display:inline; zoom:1; width:80px; height:20px; margin:10px; padding:10px; text-align:center; background:#cfc;
這樣就能夠使在ie 6/7中的inline元素具有inline-block的效果。
給個example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>span</title>
<style type="text/css">
.test{
line-height: 50px;
}
.test img{
vertical-align: middle;
height: 50px;
line-height: 50px;
}
.test-span{
line-height: 50px;
}
</style>
</head>
<body>
<p class="test"><img src="未標題-1.jpg" width="265" height="203" /><span class="test-span">dd</span></p>
</body>
</html>
這裡會存在一個小問題, 圖片img會的p元素的頂部存在3畫素作用的間距。
百度之,原來是個bug , 解決辦法蠻多
第一種就是換doctype為<!doctype html>
其它如果不改doctype可以去設定含有img元素的高度,並且需要float一下就ok了。
.test{
line-height: 50px;
flost:left;
height: 50px;
}
注意問題:這裡需要垂直居中,是採用設定img的vertical-align的屬性,而不是文字。
當然這也不是絕對的,具體需要看那一個元素的高度更高,就去設定哪一個元素的vertical-align屬性。
當然還有一個經驗之談就是在切圖的時候,將圖的高度切為單數。這樣的ie6/7下就不會有多出的1px的問題。