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。

<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/

Answer 2

尝试使用line-height：

<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>

DEMO

Answer 3

你应该使用：

div{

    position:relative
        vertical-align:middle;
}
p{

    position:absolute;
}

这里有一个例子： http://fiddle.jshell.net/fr3TD/6/

Answer 4

尝试：

p{
    display:table;
    margin:0;
    height:100%;
    width:100%;
}
span{
    text-align:center;
    display:table-cell;
    vertical-align:middle;
}

DEMO here.

如何在</p> <div>？</div>中垂直对齐<p>

4 个答案: