Hey guys,
Having a problem here with vertically aligning images and text within a <div>. I have a loop that is running to display a users thumbnailed images within their gallery on my image hosting site. However, not all thumbnails are the same height, causing it to look stagard within each row. So my solution to make it look "nicer" would be to vertically align the contents of each <div> centered.
I know the first thing your going to say is use <div style="vertical-align:middle">, but I have tried this and it isn't working, which I do not understand. Also, looping <td>'s would be insufficient since they won't break down to another row when space runs out on the current row. They would just keep going out into one single row.
My code is pasted below of the entire section that is being looped (loop begins within the {{section}} tags). Any helps/tips would be helpful.
PHP Code:
{{* ---A loop for each thumbnail---- *}}
<table width="100%">
<tr>
<td align="center" valign="top">
{{section name=id loop=$image_name}}
<div style="float: left; width: 126px; height: 150px; vertical-align:middle ">
<a href="javascript:image_details_popup('details.php?name={{$image_name[id]}}', 700, 400)"><img src="images/{{$username}}/-{{$image_name[id]}}.png" style="border:1px solid #000000; " /></a><br />
<small>{{$image_name[id]}}<br />
{{$time_uploaded[id]}}</small>
</div>
{{/section}}
</td>
</tr>
</table>
Thanks!
Kyle