如何垂直对齐浮动div中的文本?例如:我有一个固定高度的动态内容。如果内容很小或很大,则必须自动垂直对齐。
由于
答案 0 :(得分:12)
表格单元格是最简单的解决方案。
Javascript是另一种选择(测量div的大小和文本大小,然后调整填充,或线高,或其他)。
编辑:或者这个很棒的CSS:
CSS
div#container {
border: solid 1px;
height: 300px;
}
div#content {
border: solid 1px;
}
div#balance {
border: solid 1px;
/* gotta be 100% */
height: 100%;
}
div.valign {
/* firefox 2 */
display: -moz-inline-box;
/* everybody else */
display: inline-block;
vertical-align: middle;
}
/* IE 6 and 7 hack */
html* div.valign {
display: inline;
}
HTML
<div id="container">
<div id="balance" class="valign"></div>
<div id="content" class="valign">
Blah blah blah blah<br/>
Blah blah blah blah<br/>
Blah blah blah blah<br/>
Blah blah blah blah<br/>
Blah blah blah blah
</div>
</div>
有意做一篇关于此事的博客文章,我想是时候了。
答案 1 :(得分:11)
我知道这会破坏我的声誉,但......使用表格单元格。任何用于垂直对齐的跨浏览器CSS解决方案都将是维护的两倍,并且乐观。
答案 2 :(得分:10)
<div style="display: table-cell; vertical-align: middle;">I'm in the middle!</div>
答案 3 :(得分:5)
Chris Coyier写了一篇很好的教程:http://css-tricks.com/vertically-center-multi-lined-text/
我自己用过它,效果很好。
答案 4 :(得分:2)
我之前遇到过这个问题。 我会引用专家的话,所以我不会捏造这个: “......内部物体绝对位于区域高度的一半。然后向上移动一半高度。”
如果从数据库生成数据并且每个页面的高度不同,则可以使用%而非精确像素完成此操作。
来源:here
演示:链接在上面的页面
这是我的第一个答案......
答案 5 :(得分:0)
你试过vertical-align:middle; ?