如何像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/