[转]文字垂直居中

最新推荐文章于 2022-05-25 00:45:15 发布

gladtomeetyou

最新推荐文章于 2022-05-25 00:45:15 发布

阅读量367

点赞数

分类专栏： Web开发文章标签： chrome xhtml ie border google class

Web开发专栏收录该内容

35 篇文章 0 订阅

订阅专栏

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

具体来说应该有两种情况:
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/