Current location: Hot Scripts Forums » General Web Coding » CSS » Vertical Alignment within a <div>

Vertical Alignment within a <div>

Reply
  #1 (permalink)  
Old
Newbie Coder
 
Join Date: Apr 2006
Posts: 9
Thanks: 0
Thanked 0 Times in 0 Posts
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
Reply With Quote
  #2 (permalink)  
Old
Newbie Coder
 
Join Date: Apr 2006
Posts: 9
Thanks: 0
Thanked 0 Times in 0 Posts
Reply With Quote
  #3 (permalink)  
Old
Wannabe Coder
 
Join Date: Aug 2004
Location: Sverige
Posts: 124
Thanks: 0
Thanked 0 Times in 0 Posts
Better solution:

Code:
position: relative; top: 50%; height: 150; margin-top: -75;
Reply With Quote
Reply

Bookmarks


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Vertical Scrolling Text ms_tyro JavaScript 1 11-15-05 09:48 AM
local <div> into parent <div> perleo CSS 1 09-23-05 01:14 AM
Vertical Text Alignment!!!!!!!! leestratton CSS 2 06-03-05 12:06 AM
make sure vertical scrollbar is appropriately displayed and another thing Trel JavaScript 0 04-21-05 03:52 PM
not vertical i want it horicontal khan2002 PHP 0 02-16-04 11:52 AM


All times are GMT -5. The time now is 10:46 PM.
vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.