Monthly Archives: 四月 2009

    “文字垂直居中”这个算是老话题,网上也有很多解决方式,我这里就介绍一种较为简单的实现方法. 具体来说应该有两种情况: 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;最终实现了文字的垂直居中,看看效果: