表格单元格中图像对齐的问题
问题描述:
我有一张表格,图像下面有大约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;
}
我只是想图像排队均匀不管标题的长度。
答
添加vertical-align:top
规则,你的表格单元格。默认值是baseline,但是您希望将值设置为最高。
table td {
width: 128px;
padding: 0px 10px 0px 10px;
vertical-align:top;
}
真棒,非常感谢。 – 2013-02-18 03:47:55