如何垂直對齊HTML表格單元格中心的數據？

我有一個HTML表格，每行有兩行和兩個單元格。
每行中的單元格1都有一個圖像佔位符。
每行中的單元格2都有一些文本（每個單元格都不相同）。
如何垂直對齊HTML表格單元格中心的數據？

當我將它加載到服務器時，它顯示出像圖像（單元格1）對齊到頂部，文本（單元格2）低於圖像的下邊緣。

我試過v-align屬性表，垂直對齊CSS屬性，單元格邊距，字體較小，較小的圖像等

總是得到相同的結果。

來源

2012-01-04 Serge Vinogradov

對於初學者，你不應該使用表格。 – PeeHaa 2012-01-04 16:08:46

我假設你的意思是「不應該」？ – 2012-01-04 16:10:36

ouch，你*真*不應該使用這個表。那就是說：'td'有'vertical-align：baseline' - 如果你把它改成'middle'，它*應該*工作。 – ptriek 2012-01-04 16:10:41

你應該把那個東西到li的。

HTML：

<ul class="usps"> 
    <li>Denver’s Only LOCAL Ad Posting Service.</li> 
    <li>Your first week of ad posting is FREE!!! We are that confident of our ability to post LIVE Ads for your firm!!!</li> 
    <li>etc</li> 
</ul>

CSS：

ul.usps { list-style-image: url('checkbox.png'); }

對於你的問題：

那是因爲你已經設置vertical-align錯誤（baseline）。這將這些東西排列在父元素的基線上。

來源

2012-01-04 16:11:00 PeeHaa

確定您輸入的屬性正確嗎？使用Chrome的開發者工具和編輯CSS，這個工作對我來說：

.content td { vertical-align: middle; }

@PeeHaa是正確的，你不應該使用<table>這因爲它不是表格數據。這裏最語義正確的選擇應該是<ul>有：

ul li { 
    display: block; 
    list-style-type: none; 
}

來源

2012-01-04 16:09:53

從tr定義中刪除了vertical-align:baseline。然後，讓您的間距，加上height: 65px;

來源

2012-01-04 16:10:01

vertical-align:middle;在CSS

來源

2012-01-04 16:11:06 Dion

您有：

vertical-align: baseline;

在你的style.css，線15這是防止它看你怎麼想它。

來源

2012-01-04 16:11:09 Slavic

如何垂直對齊HTML表格單元格中心的數據？

回答

相關問題