【发布时间】：2012-09-26 23:59:39
【问题描述】：
我正在尝试创建一个表格，其中包含画廊中的图片及其正下方的名称。我想将每列中的图像垂直居中，并将名称对齐在<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>
【问题讨论】：
-
TABLES 用于数据，而不是布局。
-
请发布您生成的 HTML，而不是 PHP。
-
使用 HTML 输出编辑。而且我通常避免使用桌子，但它们似乎在这种情况下效果最好。
标签： html css html-table alignment center