css實作文字垂直居中的程式碼_經驗交流-www.jb51.net-css垂直居中www.jb51.net css垂直居中
- PHP中文网原創
- 2016-05-16 12:06:371747瀏覽
CSS中怎樣設定才能使對像中的文字垂直居中於對象，這個問題也是捆擾很多朋友的難題。現在網路上的許多程式碼都做不到瀏覽器相容。我把網路上有關的方法整理了一下，做了些改動，完全可以兼容各主流瀏覽器。
下面具體說一下在不同情況下垂直居中的方法。
一、一行文字垂直居中
看一下下面的程式碼：
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitionaldtd “>
phpcnltphp&cnp id="all"phpcngt&phpcn/phpcn一行文字垂直居中，此物件高度為20px
phpcnltphpphpcn設定行高為：normal
方法：line-height:20px。設定相同的行高和物件高度。
說明：這種設定簡單又相容於各種瀏覽器，支援內嵌物件。但如果是固定高度的對象，只能顯示一行。當有兩行文字時，如果不設定「overflow:hidden」會把物件撐開。
二、多行文字，且高度自適應
請看下面的程式碼：
方法：padding-top:10px; padding-bottom: 10px。設定相同的上下內邊距。
說明：相容於各種瀏覽器，支援內聯對象，同時支援非文字對象，如img。但有一個缺點就是對象的高度不能固定。
三、固定高度的多行文字垂直居中
這種方法比較複雜，我也會詳細說明的。下面還是先看程式碼：
方法：
（1）vertical-align:middle; display:table-cell。這個方法的意思是：強制物件轉換為Table，vertical-align:middle的作用和表格中的valign="center"相同。
本來是很方便的屬性，但IE不支援這個屬性。為了使各瀏覽器相容，我們不得不想其他的方法。
（2）在物件內建立一個子對象，並在子對象內再建立一個子對像或段落。網頁中：
這裡有多行文字，高度是50px這裡有多行文字，高度是50pxphpcn CSS中：
p {margin:0;}：因為FireFox預設P是有間距的
#a {height:50px;position:relative;}：設定高度50，如果要是子物件相對它定位，則要設定position:relative
#a p {*position:absolute;*top:50%;}：前面加星號“*”只有IE支持，其他瀏覽器會忽略此設定。 position:absolute設定了此子物件的定位為絕對定位，top:50%設定了顯示在距離頂端50%的位置，即25px（因為上面設定了父物件的高度為50px）。
#a p p {*position:relative;*top:-50%;}：這段程式碼只能先理解為向上移動剩下高度的50%。因為top設定了負值，相當於向相反的方向移動。
說明：支援主流瀏覽器（在IE6，FireFox2下測試）。