CSS: Different vertical alignments for a single <td> - html

Question

I'm trying to create a table containing images in a gallery along with their names right below them. I'd like to center the images vertically in each column, and have the names aligned at the bottom of the <td>, but I can't seem to get it to work. This is my code so far:
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;
}
And my Php code to display the table:
<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><img src="'.$item['thumb'].'" /></center>
<span class="desc">'.$item['title'].'</span></td>';
}
?>
</tr></table>
My images appear to center vertically with no problems, but the names still appear directly under the images, rather than at the bottom of the cell. How can I fix this?
EDIT: Here's the HTML generated by the Php code (removed URLs and stuff just for the sake of saving space):
<table border="0" class="gallery"><tr>
<td>
<center><img src="[URL]" /></center>
<span class="desc">[name]</span>
</td>
<td>
<center><img src="[URL]" /></center>
<span class="desc">[name]</span>
</td>
<td>
<center><img src="[URL]" /></center>
<span class="desc">[name]</span>
</td>
</tr><tr>
<td>
<center><img src="[URL]" /></center>
<span class="desc">[name]</span>
</td>
<td>
<center><img src="[URL]" /></center>
<span class="desc">[name]</span>
</td>
<td>
<center><img src="[URL]" /></center>
<span class="desc">[name]</span>
</td>
</tr></table>

Answer 1

Please try this:
Use two tr tags and in first - image - , next - name -