“文字垂直居中”这个算是老话题,网上也有很多解决方式,我这里就介绍一种较为简单的实现方法.
具体来说应该有两种情况:
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;最终实现了文字的垂直居中,看看效果:
提示：你可以先修改部分代码再运行。
但在测试中发现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)
提示：你可以先修改部分代码再运行。
这种实现方法的缺点:增加一个无意义的容器.
I’m new to this blog. Apologize for asking this though, but to OP…
Do you know if this can be true;
http://www.bluestickers.info/ringtones.php ?
it came off http://ringtonecarrier.com
Thanks