CSS: Different vertical alignments for a single <td>

[Tnhnxvmr]

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 \[code\]<td>\[/code\], but I can't seem to get it to work. This is my code so far:\[code\]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;}\[/code\]And my Php code to display the table:\[code\]<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>\[/code\]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?