如何像td中那样在跨度或div的中心（垂直）对齐文本？

Question

我喜欢表格，因为那里的文本对齐非常好。 如果我们在<td>内有文本，例如<td>Sample Text</td> ，则单元格的高度无关紧要，该文本将在中心垂直对齐。 如果单元格中没有足够的空间容纳文本，则文本将自动重新对齐。

但是，如果我在td内有一个跨度，且高度与td相同，则文本将在顶部对齐。 我可以在跨度内提供固定的填充，以使文本垂直对齐，但是在调整大小时，它不会将文本向上拉到单元格内，而留下永久的顶部填充。

我想要的是使文本在span范围内（在td内）起作用，使其行为与在td内的行为完全一致。 下图描述了我想说的话；

这是一个演示小提琴 ，我只想在span内显示文本以完全按照td内的方式显示。

HTML：

<table cellpadding="0" cellspacing="0">
    <tr>
        <td>Sample Text</td>
    </tr>
    <tr>
        <td>Sample Text rearranged</td>
    </tr>
    <tr>
        <td><span>Sample Text</span></td>
    </tr>    
</table>

CSS：

td{
    border: solid 1px #000;
    height: 40px;
    width: 100px;
}
span{
    height: 40px;
    display: block;
    background: orange;
}

Answer 1

一种简单的方法是设置行高。 但是，如果您具有可变的高度和/或多行文本，则此方法将无效。

span {
    line-height: 40px;
}

td内部的另一种方式是vertical-align: middle; 随着删除display: block; 。 您可以在td上设置背景颜色。

td {
    background-color: orange;
}
span {
    vertical-align: middle;
}

Answer 2

您已将display:block设置为您的跨度，这就是为什么它没有垂直居中的原因。 设置TD而不是SPAN的背景。

Answer 3

您可以设置以下样式：

div, span{
  width:100%;
  text-align:center;
  padding-top:5px;
}

Answer 4

将display:table设置为父标记，将display:table-cell和vertical-align:middle设置为span如下所示：

DEMO

这适用于所有元素，而不仅仅是td

HTML

<div>
    <span>
        some text
    </span>
</div>

CSS

div{
    width:100px;
    height:100px;
    background:gold;
    display:table;
}

span{
    display:table-cell;
    vertical-align:middle;
}

Answer 5

我真的不知道赖特的方法，但是您可以将其放在顶部。 或使用您所说的有效。 但是如果你包括

行高：100像素; / *与div高度相同* /

将工作。 但是，如果只是一行。 否则，您必须包括填充，否则我认为是。

Answer 6

好吧，首先我必须告诉您div和span之间的区别。 div是一个block元素（占用浏览器的整个宽度），而span是一个内联元素（占用内容的宽度）

因此，当您将跨度放入td中时，实际上并没有采用全宽。 因此，您可以将其转换为div或将其范围设置为display: block;

现在，由于现在已经调整了宽度，因此我们还必须调整高度。 由于span会将span的高度理解为内容的高度，因此我们给出40px的线高。 即， line-height: 40px; 这是td的高度。

作为总结，显示块要取全宽，而行高是为了使高度尽可能高。 在我们的案例中，我们使其等于td高度。

希望这可以帮助 ！

span { 
    background: orange;
    line-height: 40px;
    display:block;}

http://jsfiddle.net/f45Sv/8/