html - CSS:单个 的不同垂直对齐方式

Question

我正在尝试创建一个表格，其中包含画廊中的图像以及它们正下方的名称。我想将每列中的图像垂直居中，并在 <td> 的底部对齐名称，但我似乎无法让它工作。到目前为止，这是我的代码:

table.gallery {
    width:100%;
    text-align: center;
    table-layout: fixed;
}
table.gallery td {
    padding: 10px 10px 10px 10px;
    width:33%;
    overflow: hidden;
}
table.gallery td img{
    vertical-align: middle;
}
table.gallery td span.desc {
    vertical-align: bottom;
}

还有我的 Php 代码来显示表格:

<table border="0" class="gallery"><tr>
<?php
    $curtd = -1;
    foreach ($img_arr as $item) {
        $curtd++;
        if ($curtd >= 3){
            echo '</tr><tr>';
            $curtd = 0;
        }
        echo '<td><center><a href="'.$item['link'].'" target="_blank"><img src="'.$item['thumb'].'" /></a></center>
                <span class="desc"><a href="'.$item['link'].'" target="_blank">'.$item['title'].'</a></span></td>';
    }
?>
</tr></table>

我的图像似乎垂直居中没有问题，但名称仍然直接出现在图像下方，而不是单元格底部。我该如何解决这个问题？

编辑:这是由 Php 代码生成的 HTML(为了节省空间删除了 URL 和内容):

<table border="0" class="gallery"><tr>
<td>
    <center><a href="[link]" target="_blank"><img src="[URL]" /></a></center>
    <span class="desc"><a href="[link]" target="_blank">[name]</a></span>
</td>
<td>
    <center><a href="[link]" target="_blank"><img src="[URL]" /></a></center>
    <span class="desc"><a href="[link]" target="_blank">[name]</a></span>
</td>
<td>
    <center><a href="[link]" target="_blank"><img src="[URL]" /></a></center>
    <span class="desc"><a href="[link]" target="_blank">[name]</a></span>
</td>
</tr><tr>
<td>
    <center><a href="[link]" target="_blank"><img src="[URL]" /></a></center>
    <span class="desc"><a href="[link]" target="_blank">[name]</a></span>
</td>
<td>
    <center><a href="[link]" target="_blank"><img src="[URL]" /></a></center>
    <span class="desc"><a href="[link]" target="_blank">[name]</a></span>
</td>
<td>
    <center><a href="[link]" target="_blank"><img src="[URL]" /></a></center>
    <span class="desc"><a href="[link]" target="_blank">[name]</a></span>
</td>
</tr></table>

Answer 1

请试试这个:

使用两个 tr 标签，第一个 - image - ，下一个 - name -