css – 如何垂直对齐一个文本？

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

谢谢

解决方法

表格单元格是最简单的解决方案.

Javascript是一种替代方法(测量div的大小和文本大小,然后调整填充,或线性高度,或任何).

编辑：or this awesome 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>

做一个博客文章的意思有一段时间,我认为是时候了.

原文地址：https://www.jb51.cc/css/216901.html