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%; }

垂直对齐td中的图像不起作用

1 个答案: