如何垂直对齐文本？

Question

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

谢谢

- Harry

---

相对于什么垂直对齐？ - David Thomas

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>

一直想写这方面的博客文章，我认为现在是时候了。

- Ryan Florence

Answer 2

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

- JerSchneid

Answer 3

Chris Coyier撰写了一篇关于此的优秀教程：http://css-tricks.com/vertically-center-multi-lined-text/

我自己也使用过它，它完美地工作。

- Kelly Knights

Answer 4

我之前遇到过这个问题。 我会引用专家的话，以免弄错： “...内部对象在一半高度的绝对位置。然后向上移动其一半高度。” 可以使用%完成所有操作，而不是使用确切的像素，以防数据从数据库生成并且每个页面的高度都不同。 来源：这里 演示：链接在上面的页面中。 以下是我的第一个答案...

- GlenCrawford

Answer 5

你尝试过使用 vertical-align: middle; 吗？

- whichdan

---

这在非表格或浮动元素上不会产生你想要的效果。这将内联元素对齐在一起。 - Ryan Florence