网站开发日志

2009年4月7日星期二

CSS文本垂直居中的最终方案

关于"CSS文本垂直居中"的文章在网上可以找到很多,它们主要涉及3种方法:

单行文本垂直居中

方法:把文本段落高度(line-height)和所在区域高度(height)设为一致即可。缺点:这种方法只对单行文本有效。

代码:

<div style="border:1px solid #ccc; height:50px; line-height:50px;">
网站开发日志
</div>

效果:

网站开发日志

多行文本垂直居中

方法: 不设区域高度(让高度自适应), 然后在区域上下位置使用相同的填充控制,即使用padding属性。缺点:对固定高度的区间无效。

代码:

<div style="border:1px #ccc solid; padding:20px 0; width:578px;">
www.61dh.com/blog
本博客用于记录网站开发的点点滴滴。包括网站设计,编程指南,资源和灵感。
本站的文章大都是原创或者翻译作品。
</div>

效果

www.61dh.com/blog 本博客用于记录网站开发的点点滴滴。包括网站设计,编程指南,资源和灵感。本站的文章大都是原创或者翻译作品

浏览器居中:

方法: 设置position属性为绝对(absolute), 然后把在上方留下浏览器高度一半减去文本区域高度一半的距离,例如文本区域高度为浏览器高度的20%,那么上方应该留下50%-10%=40%;同理,在左边留下浏览器宽度一半减去文本区域宽度一半的距离。

缺点:这种方法只是让文本在落在浏览器中央,而并非在某个特定区域的中间。

代码:

<div style="position:absolute; top:40%; left:40%; width:20%; height:20%">
本博客用于记录网站开发的点点滴滴。包括网站设计,编程指南,资源和灵感。
本站的文章大都是原创或者翻译作品。我并不反对转载,因为互联网本来就是用来共享资源的。
但是当你引用我的文章时,请注明出处。谢谢!
</div>

效果

由于上面的三种方法都存在缺点,因此它们往往不是你所想要的方案。在实际运用中,你可能需要在让多行文本在一个特定高度的区域内垂直居中。当以上三种方法都行不通的情况下,请试试下面要介绍的CSS文本居中的最终方案!

其实最终方案并不复杂,有点麻烦的是浏览器的兼容性问题。因此,我们必须创建2套CSS样式方案:

.outer {
  display:table; width:578px; overflow:hidden; 
  background: #eee; height: 42px;
}
.middle {display:table-cell; vertical-align:middle; margin-left 10px;} 
/*下面的CSS是针对IE7,IE6*/

<!--[if lte IE 7]>

<style>

.outer{position:relative;}
.middle{position: absolute; top: 50%;}
.inner{position: relative; top:-50%}
</style>
<![endif]-->

这里我们需要定义三个DIV:

  • 外层(outer) 可以根据需要定义高度、宽度,但是display必须为table。
  • 中间层(middle) 可以有特定的CSS样式,例如:margin-left,但是display必须为table-cell,vertical-align必须为middle。
  • 内层(inner) 主要是用来对付IE6和IE7的(注意:IE8支持table-cell居中,所以无需hack)。

有了上面的CSS,HTML代码可以这么写:

<div class="outer">
  <div class="middle">
    <div class="inner">
      把你要居中的文本放在这里
      这是第二行
      ...
    </div>
  </div>
</div>

演示

标签: ,

相关文章:

1 条评论:

发表评论

指向此帖子的链接: