html - 如何垂直对齐 内的 ？

Question

我面前有以下场景: http://fiddle.jshell.net/fr3TD/

这里我一直在尝试垂直对齐 <p>我里面的标签 <div> .我考虑了很多解决方案，包括 vertical-align , 数学计算 padding对于我的 <p>等。这些似乎都不是理想的解决方案，因为我的 HTML 将自动生成，并且跨度内的文本将是可变的。

我也花了很多时间在这个门户网站上搜索解决方案，但似乎有一个共识，即在不知道 height 的情况下的内容很难垂直对齐。在我的例子中，内容的高度是未知的，但可以保证它不会大于包含 <div> 的高度。 .

谁能建议我找到解决问题的方法？

提前致谢!

Answer 1

单行

对于单行，使 p 的行高等于 div 的高度是最简单的方法。

<div style="background-color:#4F81BD; height: 88px; width: 148px; ">
    <p style="text-align:center; line-height: 88px">
        <span style="font-size:41px; color:#FFFFFF; ">One</span>
    </p>
</div>

http://fiddle.jshell.net/fr3TD/2/

---

多行

如果你想让它与多行一起工作，你应该让你的 div 充当表格单元格。表格单元格允许垂直居中。这种定心称为中定心。为此添加:

display: table-cell; vertical-align: middle

到你的分区。

<div style="background-color:#4F81BD; height: 200px; width: 148px; display: table-cell; vertical-align: middle">
    <p style="text-align:center;">
        <span style="font-size:41px; color:#FFFFFF; ">One Two Three</span>
    </p>
</div>

http://fiddle.jshell.net/fr3TD/8/

关于居中的更多信息:http://css-tricks.com/centering-in-the-unknown/