我正在尝试创建一个包含图库中图像的表格以及它们正下方的名称。我想在每列中垂直居中图像,并在<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>
答案 0 :(得分:0)
请试试这个:
使用两个tr标签,在第一个 - 图像 - ,下一个 - 名称 -