css-使用line-height實現垂直置中的一些問題

標籤：com   高度   str   部落格   屬性   box   lin   測試   htm   

網上都是這麼說的，把line-height值設定為height一樣大小的值可以實現單行文字的垂直置中。這句話確實是正確的，但其實也是有問題的。問題在於height，看我的表述：“把line-height設定為您需要的box的大小可以實現單行文字的垂直置中”，差別在於我把height去掉了，這個height是多餘的，您不信您可以自己試試。

多行文字的垂直置中

要實現高度不固定的文字垂直置中使用padding就好了。對於高度固定的div，裡面文字單行或多行顯示，字型大小有大有小的情況怎麼辦呢？方法之一就是藉助於line-height。

為demo頁面的批註圖：

正如上面所說，line boxes的高度取決於它的下屬職員的最高高度。而這個高度由一個不佔據任何空間的空格完成，方法即使設定font-size為0，line-height為所需要的高度。同時，我們為了分隔line boxes，同時要保持在一行上，需要設定display屬性為inline-block。如下代碼，有別於demo：

css代碼：

.mulit_line{line-height:150px; border:1px dashed #cccccc; padding-left:5px; font-size:0;}.mulit_line span{display:-moz-inline-stack; display:inline-block; line-height:1.4em; vertical-align:middle;}.mulit_line i{width:0; display:-moz-inline-stack; display:inline-block; vertical-align:middle;}

感謝小西的提醒，下為修複IE8問題後的代碼：

1 .mulit_line{line-height:150px; border:1px dashed #cccccc; padding-left:5px;}2 .mulit_line span{display:-moz-inline-stack; display:inline-block; line-height:1.4em; vertical-align:middle;}3 .mulit_line i{width:0; display:-moz-inline-stack; display:inline-block; vertical-align:middle; font-size:0;}

 

html代碼：

1 <p class="mulit_line">2     <span >這裡是高度為150像素的標籤內的多行文字，文字大小為12像素。<br />這裡是第二行，用來測試多行的顯示效果。</span><i>&nbsp;</i>3 </p>

摘錄自張鑫旭的部落格，更多：http://www.zhangxinxu.com/study/200908/img-text-vertical-align.html

 

總結：

要在一個固定大小的div中的多行文字垂直置中：

1 <div class="yellowbox">2     <p><span>Guangzhou Haisan Entertainment Technology Co., Ltd.: The No.1 water park equipment company in China</span></p>3 </div>

第一步、將文字放在p元素下的span中。

第二步、將p元素設定高度與div一致（p的line-height=div的height）。

第三步、span為inline-block且vertical-align為middle（line-height重新設定）。

 

 

css-使用line-height實現垂直置中的一些問題