[英]CSS: Different vertical alignments for a single <td>
我正在尝试创建一个表,其中包含图库中的图像及其正下方的名称。 我想将图像垂直排列在每一列中,并且名称在<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>
请尝试以下方法:
使用两个tr标记,在第一个图像-后一个名称中-
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.