[转]文字垂直居中

来源：互联网发布：淘宝未收到货显示签收编辑：程序博客网时间：2024/05/22 04:29

“文字垂直居中”这个算是老话题,网上也有很多解决方式,我这里就介绍一种较为简单的实现方法.

具体来说应该有两种情况:
1.单行文字
这种情况比较好处理,直接设置与height相等的line-height就OK,或者使用padding.

2.多行文字在已知高度的容器里垂直居中
曾经用table布局的时候要达到这个效果非常容易,但现在就需要费点心思:

对于标准的浏览器只需添加display:table-cell; vertical-align:middle;就可以实现,目前IE8已支持这种写法,但IE6 IE7还是不不行.

针对IE6,IE7我们需要改变下结构,这里是增加了<i>和<p>两个容器,其中<i>的宽度设为0,高度设为100%,这就形成一条看不见的线,并设为内联元素使得vertical-align:middle;生效,用zoom:1;触发IE的layout,配合<p>的weight:100%和vertical-align:middle;最终实现了文字的垂直居中,看看效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>文字与图片垂直居中</title><style type="text/css">.demo{ display:table-cell; width:400px; height:300px; border:1px solid #d7d7d7; vertical-align:middle;}.demo i{ display:inline; width:0px; height:100%; vertical-align:middle; zoom:1;}.demo p{ display:inline; width:100%; vertical-align:middle; zoom:1;}</style></head><body><div class="demo"> <i></i> <p>我们来看看这段文字是不是垂直居中的,我们来看看这段文字是不是垂直居中的,我们来看看这段文字是不是垂直居中的,我们来看看这段文字是不是垂直居中的.</p></div></body></html>

但在测试中发现Chrome下demo的高度莫名的减少了(大概只有180px),这里还需要为Chrome单独写个hack
@media screen and (-webkit-min-device-pixel-ratio:0) {
.demo p{ height:100%;}/*Google Chrome*/
}

最终代码:(支持IE5.5-IE8、FF、Opera、Chrome)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>文字与图片垂直居中</title><style type="text/css">.demo{ display:table-cell; width:400px; height:300px; border:1px solid #d7d7d7; vertical-align:middle;}.demo i{ display:inline; width:0px; height:100%; vertical-align:middle; zoom:1;}.demo p{ display:inline; width:100%; vertical-align:middle; zoom:1;}@media screen and (-webkit-min-device-pixel-ratio:0) { .demo p{ height:100%;}/*Google Chrome*/}</style></head><body><div class="demo"> <i></i> <p>我们来看看这段文字是不是垂直居中的,我们来看看这段文字是不是垂直居中的,我们来看看这段文字是不是垂直居中的,我们来看看这段文字是不是垂直居中的.</p></div></body></html>

这种实现方法的缺点:增加一个无意义的容器.

原文链接：http://www.iinterest.net/2009/04/06/vertical-align/