A little help with CSS (vertical alignment within a <div>) - Webmaster Forum

04-22-2006, 02:24 AM

xxkylexx

Status: Member
Join date: Apr 2006
Location:
Expertise:
Software:

Posts: 181

iTrader: 0 / 0%

xxkylexx is on a distinguished road

A little help with CSS (vertical alignment within a <div>)

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