在td中垂直對齊圖像不起作用

Question

我有四個表格單元格，其中兩個每個都有一個圖像（其他兩個單元格與我的問題AFAIK無關）。我正在嘗試垂直對齊表格單元格頂部的較小圖像。我曾嘗試在表格單元格中使用vertical-align：top來顯示圖像，但它不起作用。我不清楚，爲什麼，因爲我看不到任何會導致問題（使用Firebug）。

<table class="store-table"> 
<tr> 
<td class="merch-name" colspan="2"><a title="Everybody Needs Love" href="http://kunaki.com/Sales.asp?PID=PX00XUQBLL&amp;PP=1" target="_blank">Everybody Needs Love</a></td> 
<td class="merch-name" colspan="2"><a title="Jimmy Clanton In Concert" href="http://kunaki.com/Sales.asp?PID=PX00Z59GSX" target="_blank">Jimmy Clanton In Concert</a></td> 
</tr> 
<tr class="pics"> 
<td style="width: 25%;"><a href="http://kunaki.com/Sales.asp?PID=PX00XUQBLL&amp;PP=1"><img class="alignnone size-full wp-image-345" alt="everybody-needs-love" src="http://www.josephruscitti.com/clients/jimmyclanton/wp-content/uploads/2014/02/everybody-needs-love.jpg" /></a></td> 
<td style="width: 25%;">$15.00</td> 
<td style="width: 25%;"><a href="http://kunaki.com/Sales.asp?PID=PX00Z59GSX"><img class="alignnone size-medium wp-image-312" alt="Jimmy Clanton In Concert" src="http://www.josephruscitti.com/clients/jimmyclanton/wp-content/uploads/2014/02/In-Concert-Cover-178x300.jpg" width="178" height="300" /></a></td> 
<td style="width: 25%;">$20.00</td> 
</tr> 
</table> 

有問題的演示網站在這裏。 http://www.josephruscitti.com/clients/jimmyclanton/store/在這個頁面的表格中，有三行內容全部在一起，我遇到的行是第二行。

Answer 1

您需要垂直對齊適用於td像這樣：

<table class="store-table"> 
    <tr> 
    <td class="merch-name" colspan="2"><a title="Everybody Needs Love" href="http://kunaki.com/Sales.asp?PID=PX00XUQBLL&amp;PP=1" target="_blank">Everybody Needs Love</a></td> 
    <td class="merch-name" colspan="2"><a title="Jimmy Clanton In Concert" href="http://kunaki.com/Sales.asp?PID=PX00Z59GSX" target="_blank">Jimmy Clanton In Concert</a></td> 
    </tr> 
    <tr class="pics"> 
    <td style="width: 25%; vertical-align:top;"><a href="http://kunaki.com/Sales.asp?PID=PX00XUQBLL&amp;PP=1"><img class="alignnone size-full wp-image-345" alt="everybody-needs-love" src="http://www.josephruscitti.com/clients/jimmyclanton/wp-content/uploads/2014/02/everybody-needs-love.jpg" /></a></td> 
    <td style="width: 25%;">$15.00</td> 
    <td style="width: 25%;"><a href="http://kunaki.com/Sales.asp?PID=PX00Z59GSX"><img class="alignnone size-medium wp-image-312" alt="Jimmy Clanton In Concert" src="http://www.josephruscitti.com/clients/jimmyclanton/wp-content/uploads/2014/02/In-Concert-Cover-178x300.jpg" width="178" height="300" /></a></td> 
    <td style="width: 25%;">$20.00</td> 
    </tr> 
</table> 

順便說一句，將CSS內聯到每一個表格單元格是不是一個偉大的方法。你會更好地使用單獨的CSS的一些。例如：

.store-table td { width: 25%; }