12

如何垂直对齐浮动div中的文本？例如：我有一个固定高度的动态内容。如果内容小或大，它必须自动垂直对齐。

谢谢

4

5 回答 5

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>

一段时间以来一直想写一篇关于这个的博客文章，我认为是时候了。

于 2009-07-09T04:44:09.487 回答
10 
<div style="display: table-cell; vertical-align: middle;">I'm in the middle!</div>
于 2009-07-09T04:47:48.200 回答
5

Chris Coyier 就此写了一篇出色的教程：http ://css-tricks.com/vertically-center-multi-lined-text/

我自己用过，效果很好。

于 2009-07-09T04:47:52.757 回答
2

我以前遇到过这个问题。我会引用专家的话，所以我不会捏造这个： “......内部物体绝对位于区域高度的一半。然后向上移动其高度的一半。”

这可以用 % 而不是精确像素来完成，以防数据是从数据库生成的并且高度随每一页而变化。

来源：这里

演示：链接在上面的页面上

这是我的第一个答案...

于 2009-07-09T04:49:41.893 回答
0

您是否尝试过垂直对齐：中间；?

于 2009-07-09T04:39:38.963 回答