如何垂直對齊嵌入塊td中的文本？

我有一張滿了tds的表格。我讓它們顯示：inline-block，以便它們可以包裝在頁面中。我似乎無法將它們內部的文本垂直對齊：中間。我怎麼做到這一點？或者是顯示：內聯塊不是要走的路？謝謝。如何垂直對齊嵌入塊td中的文本？

編輯這是代碼。抱歉，我是新發布的。

<div> 
    <table class="disk-size-table center"> 
     <tr class="disk-size-row"> 

      <!-- <td class="disk-size-td draggable" data-disk-size="500"> 
        500 GB <!-- I want the 500GB to be vertical align middle 
       </td> --> 

     </tr> 
    </table> 
</div> 

.disk-size-table { 
    border-spacing: 0; 
} 

.disk-size-td { 
    border: 1px solid black; 
    border-radius: 5px; 
    width: 60px; 
    height: 70px; 
    text-align: center; 
    vertical-align: middle; 
    padding: 0; 
    display: inline-block; 
} 

table.center { 
    margin-left: auto; 
    margin-right: auto; 
}

我動態生成看起來像註釋的tds。我希望他們顯示垂直對齊的中間。讓我知道是否需要發佈其他內容。

來源

2014-07-15 SkeetsMcCoy

歡迎來到StackOverflow！爲了寫出更好的問題並增加您接收答案的機會，請在問題中包含您的相關代碼。 – TylerH

你可以嘗試text-align：center;或按照這個答案http://stackoverflow.com/questions/9249359/is-it-possible-to-vertically-align-text-within-a-div – TheLegend

試圖解釋你想要實現的。使用'td'元素意味着你想讓所有元素具有相同的高度。但將顯示類型更改爲內聯塊會導致每個單元縮小以適應高度/寬度。沒有任何額外的信息，很難提出解決方案。通常有這些問題，一旦答案發布，新的要求出來，所以請詳細說明！ –

這是你想要的東西：Fiddle

只有做出改變是CSS

.disk-size-td { 
    ..... 
    display: table-cell; // Add this 
}

來源

2014-07-15 14:58:58 Ani

如果有display: inline-block不是另一塊你的項目的要求，你可以簡單地改變display: float這會給你你想要的風格。如果你這麼做的話，你應該注意一些功能差異，這可以從這兩者之間差異的解釋中更好地理解：http://learnlayout.com/inline-block.html。

來源

2014-07-15 14:59:07

浮動也沒有工作。它仍然沒有垂直對齊中間。 – SkeetsMcCoy

'display：float'在CSS中不存在，你可能意思是'float：left/right' – Daniel

如果保留TD的如表細胞，你可以使用這個：

<style> 
td { display: table-cell; border: 1px solid red; max-width: 250px; } 

.content, .vcenter { display: inline-block; vertical-align: middle; } 
.content { border: 1px solid green; } 
.vcenter { height: 100%; width: 0; } 
</style> 

<table><tr> 
<td> 
    <div class="content"> 
     500 GB 
    </div><div class="vcenter"></div> 
</td> 
<td> 
    <div class="content"> 
     asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf 
    </div><div class="vcenter"></div> 
</td> 
</tr></table>

的「的vCenter」分區擴展到單元格的高度，使得行高在細胞內。然後，「content」div可以使用vertical-align：middle在單元格內的行上垂直對齊。

如果你改變了TD的成直列塊，使用垂直對齊：在細胞中應該使細胞排列上線的垂直中心：

<style> 
td { display: inline-block; vertical-align: middle; border: 1px solid red; max-width: 250px; } 

.content { border: 1px solid green; } 

</style> 

<table><tr> 
<td> 
    <div class="content"> 
     500 GB 
    </div> 
</td> 
<td> 
    <div class="content"> 
     asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf 
    </div> 
</td> 
</tr></table>

但如果TD的需要去在多行上，那麼使用表就沒有意義了，而且更容易使用div。

來源

2014-07-15 15:21:41 gregn3

vertical-align: middle與CSS中的display: table-cell和HTML中的<td>以及display: inline-block;一起使用。

由於您已經在使用<table>進行標記，因此不再需要使用display: inline-block;。

要垂直對齊您的<td>，只需從.disk-size-td {}中刪除固定的height: 70px;和display: inline-block;。這是一個working fiddle。如果您的所有物品都有固定高度，則沒有任何物品可以垂直對齊:)

您可能還想向<td>添加一些padding: 10px 0;（或任何您想要的填充物）。

來源

2014-07-15 15:29:09 Daniel

如何垂直對齊嵌入塊td中的文本？

回答

相關問題