表格单元格中图像对齐的问题

Question

我有一张表格，图像下面有大约45张图片和一些标题。我遇到的问题是，当图像后面跟着一个大文本标题时，每个图像都会正确对齐（请参阅4.jpg的标题）。当有多行文本时，顶部的图像会略微推到行的其他图像之上。我很难弄清楚为什么会这样。

这里的表元素的第一行：

<table> 
    <tr> 
    <td><a href="photos/1.jpg" title="354 Address Way"><img src="photos/1_t.jpg" width="72" height="72" alt="" /></a>House</td> 
    <td><a href="photos/2.jpg" title="354 Address Way"><img src="photos/2_t.jpg" width="72" height="72" alt="" /></a>House</td> 
    <td><a href="photos/3.jpg" title="Foyer"><img src="photos/3_t.jpg" width="72" height="72" alt="" /></a>Foyer</td> 
    <td><a href="photos/4.jpg" title="Family Room with small fireplace"><img src="photos/4_t.jpg" width="72" height="72" alt="" /></a>Family Room with small Fireplace</td> 
    <td><a href="photos/5.jpg" title="Family Room 2"><img src="photos/5_t.jpg" width="72" height="72" alt="" /></a>Family Room 2</td> 
    </tr> 

表CSS：

table { 
    width: 570px; 
    font-size: .5em; 
    text-align: center; 
} 

table td { 
    width: 128px; 
    padding: 0px 10px 0px 10px; 
} 

table img { 
    border: 5px solid #3e3e3e; 
    border-width: 2px 2px 2px; 
} 

table a:hover img { 
    border: 5px solid #fff; 
    border-width: 2px 2px 2px; 
    border-color: #8f8f8f; 
    color: #fff; 
} 

我只是想图像排队均匀不管标题的长度。

Answer 1

添加vertical-align:top规则，你的表格单元格。默认值是baseline，但是您希望将值设置为最高。

table td { 
    width: 128px; 
    padding: 0px 10px 0px 10px; 
    vertical-align:top; 
} 

jsFiddle example

Answer 2

默认情况下，表格单元格将垂直对齐到中间。只需将它们设置为vertical-align: top，可能还需要一些额外的填充。

http://jsfiddle.net/LBb6B/