当前位置：首页 → 问答吧 → 固定高度下多行文字水平垂直居中

固定高度下多行文字水平垂直居中

时间：2011-03-07

来源：互联网

我在网上查了很多，发现固定高度下多行文字水平垂直居中，一般都是用display:table-cell和font-size来实现的，多是讲vertical-align的用法(关于vertical-align用法大家可以去网上查阅)。
前辈们在讲vertical-align时都会涉及一个inline box和line box，我发现这个很值得学习。今天我就是学习这个后，来做的一点小测试。不好的地方，欢迎大家拍砖。

这个效果主要是用到对line box的一点理解来实现的。原理就是让多行文字所在的span参照那个隐藏了文字的span来对齐的。

<!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>Untitled Document</title> <style type="text/css"> * {margin:0;padding:0;} .v {margin-top:10px;height:100px;font-size:12px;border:1px #ddd solid;text-align:center;} .v .s {display:inline-block;width:200px;vertical-align:middle;text-align:left;} .v .o {line-height:100px;width:1px;display:inline-block;text-indent:-9999px;} </style> </head> <body> <div class="v"> <span class="s">我的测试我的测试我的测试我的测试我的测试我的测试我的测试我的测试我的测试我的测试我的测试我的测试我的测试我的测试我的测试我的测试</span> <span class="o">我的测试</span> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: haitao8410 发布时间: 2011-03-07

http://bbs.blueidea.com/thread-3013365-1-3.html水区一个帖子

作者: 2012king 发布时间: 2011-03-07