0

我有一张桌子，里面有大约 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;
}

无论字幕的长度如何，我都希望图像均匀排列。

4

2 回答 2

2

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

http://jsfiddle.net/LBb6B/

于 2013-02-18T03:34:26.627 回答
2

vertical-align:top向表格单元格添加规则。默认值为基线，但您希望将该值设置为顶部。

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

jsFiddle 示例

于 2013-02-18T03:34:35.243 回答