Html 如何垂直对齐a<；p>；内部a<；部门>；？

我面前有以下情景：

在这里，我一直在尝试垂直对齐我的

中的

标记。我考虑了许多解决方案，包括

垂直对齐

，数学计算我的

的

填充

等。这些似乎都不是理想的解决方案，因为我的HTML将自动生成，跨度内的文本将是可变的

我也花了相当长的时间在这个门户网站上搜索解决方案，但似乎有一个共识，即如果不知道内容的高度，就很难将其垂直对齐。在我的情况下，内容的高度未知，但可以保证它不会大于包含的

有人能给我一个解决问题的方法吗

---

提前谢谢

单行

对于单行，使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>

去你的部门

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

一二三

---

有关居中的详细信息：

尝试使用

线条高度：

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



一个


您应该使用：

div{

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

    position:absolute;
}

这里有一个例子：
试试：

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

如果文本的内容跨越到两行或三行怎么办？这样：我应该提到包含div的已经有一个
位置：绝对属性。我没有提到，因为我认为它不相关。没问题，你也可以对容器div使用position absolute，但现在它把
文本对齐：居中不，不起作用。加上我的div有一个属性
位置：绝对你给它的
位置：相对嗯。。好吧，反正是thanx！如果文本的内容跨越到两行或三行怎么办？如下所示：fiddle.jshell.net/fr3TD/7如果使用display:table cell；垂直对齐：中间高度无关紧要。它将自动垂直居中。@osi您的解决方案在小提琴中工作，但不幸的是，如果包含div的位置为
绝对属性（在我的实际HTML中是这样的）它不起作用。有解决这个问题的办法吗？那你应该知道高度。否则它将居中，因为div将与p的内容一样大，或者你的意思是p在div中是绝对定位的吗？@osi否，只有div是绝对定位的。我正在考虑将设置为与div相同的高度，并使用
显示：表格单元格；垂直对齐：中间对齐在
p{
    display:table;
    margin:0;
    height:100%;
    width:100%;
}
span{
    text-align:center;
    display:table-cell;
    vertical-align:middle;
}