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，可能需要一些额外的填充。

http://jsfiddle.net/LBb6B/

Answer 2

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

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

<强> jsFiddle example

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

2 个答案: