多行文字垂直居中-xhtml+css

PHPABC CSS, xhtml/html 2,019 次浏览 , , 没有评论

单行文字垂直居中可以使用line-height来得到效果,当然也可以通过设置padding来处理,不过对 行多行文字垂直居中的话,行高line-height就不适合了,在没有定义高度的情况下,可以使用padding来 处理。当有定义有高度的可以分为两种情况:一:非IE浏览器这个比较简单,在设置vertical-align:middle;外还应把它的 display属性设置为表格的table-cell属性就可以觖决。但是注意当 display属性为table-cell时,边框的宽度是算在width里面的二:IE浏览器 IE确实是个让人比较烦的家伙,特别是IE6,但没办法,目前使用IE6的人还是最多的 。

例如在如下html结构:

<div id=”vertical”>

<div class=”kong”></div>

<div class=”content”>受《赢在中国》这个节目主题曲――《在路上》的希望能够在这条道路上慢慢成长、慢慢走下去!同时记录我在这条路上 走过的痕迹、记录我在这条道路上的成长!</div>
</div>

多行文字垂直居中相应的css代码为:

#vertical{ height:120px; display:table-cell; vertical-align:middle; border:1px #F00 solid;}

.kong{ height:100%; width:0; display:inline; vertical-align:middle; zoom:1;}

.content{ width:100%; zoom:1; display:inline; vertical-align:middle;}

多行文字垂直居中效果如下图所示:

垂直居中的多行文字

多行文字垂直居中原理:当.kong元素的宽度为0,高度为100%时,这样就占据了整个容器的左边的一条看不到的 线,display:inline后的元素依然可以使用高度,由于这时div已经变成了行内元素,vertical-align:middle自然就生效 了,zoom:1是为了触发hasLayout的一个方式。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

Go