如何垂直对齐文字？

Question

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

谢谢

Answer 1

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

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>

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

Answer 2

我知道这会破坏我的声誉,但......使用表格单元格.任何用于垂直对齐的跨浏览器CSS解决方案都将是维护的两倍,乐观.

Answer 3

<div style="display: table-cell; vertical-align: middle;">I'm in the middle!</div>

Answer 4

克里斯·科伊尔(Chris Coyier)就此撰写了一篇精彩的教程:http://css-tricks.com/vertically-center-multi-lined-text/

我自己用过它,效果很好.