Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,254
Total Threads: 80,792
Total Posts: 566,471
There are 1352 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     HTML/XHTML/DHTML/CSS :

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

Thread title: A little help with CSS (vertical alignment within a <div>)
Closed Thread  
Page 1 of 2 1 2 >
    Thread tools Search this thread Display Modes  
04-22-2006, 02:24 AM
#1
xxkylexx is offline xxkylexx
Status: Member
Join date: Apr 2006
Location:
Expertise:
Software:
 
Posts: 181
iTrader: 0 / 0%
 

xxkylexx is on a distinguished road

  Old  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

04-22-2006, 02:53 AM
#2
Cole is offline Cole
Status: I love this place
Join date: Apr 2005
Location:
Expertise:
Software:
 
Posts: 721
iTrader: 0 / 0%
 

Cole is on a distinguished road

  Old

The vertical-align property in css is a bit redundant. That property will only align inline elements and not box elements like a div.

You could change the div element to be emulated as a table level element:
Code:
display: table-cell; vertical-align: middle;

04-22-2006, 03:21 AM
#3
xxkylexx is offline xxkylexx
Status: Member
Join date: Apr 2006
Location:
Expertise:
Software:
 
Posts: 181
iTrader: 0 / 0%
 

xxkylexx is on a distinguished road

  Old

Thanks for your reply Cole. I have adjusted the div as follows, but it is still aligning at the top.

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; display: table-cell; 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>


Any ideas?


Thanks
Kyle

04-22-2006, 03:28 AM
#4
Cole is offline Cole
Status: I love this place
Join date: Apr 2005
Location:
Expertise:
Software:
 
Posts: 721
iTrader: 0 / 0%
 

Cole is on a distinguished road

  Old

Try using top and botton margins, that sometimes works. I'm decent in CSS but never really found an efficient way of doing this in a div.

Code:
margin-top:50%;
margin-bottom: 50%
If that doesn't work:
Code:
margin: auto;
If that doesn't work:

You could try using tables, but using a conditional to count the number of td's in a row and add a row break after x amount of things. Being an intermediate PHP coder myself I would think that would be easy to conceptionalize, but would be a last resort.

Try Googling as well, there has to be something.

04-22-2006, 03:33 AM
#5
Nick is offline Nick
Status: Junior Member
Join date: Jul 2004
Location: Pittsburgh
Expertise:
Software:
 
Posts: 65
iTrader: 0 / 0%
 

Nick is on a distinguished road

Send a message via AIM to Nick

  Old

I would also like to know how to do this in CSS. I've had problems with the same thing in the past.

04-22-2006, 03:40 AM
#6
xxkylexx is offline xxkylexx
Status: Member
Join date: Apr 2006
Location:
Expertise:
Software:
 
Posts: 181
iTrader: 0 / 0%
 

xxkylexx is on a distinguished road

  Old

Thanks for the reply again. These, unfortunatly, did not work either. Im not too advanced with PHP so I wouldn't know how to do that. Thanks for the help anyways!

04-22-2006, 03:43 AM
#7
Cole is offline Cole
Status: I love this place
Join date: Apr 2005
Location:
Expertise:
Software:
 
Posts: 721
iTrader: 0 / 0%
 

Cole is on a distinguished road

  Old

Originally Posted by xxkylexx
Thanks for the reply again. These, unfortunatly, did not work either. Im not too advanced with PHP so I wouldn't know how to do that. Thanks for the help anyways!
I'll play with the code tommorow for you and WILL find a good solution.

04-22-2006, 03:46 AM
#8
xxkylexx is offline xxkylexx
Status: Member
Join date: Apr 2006
Location:
Expertise:
Software:
 
Posts: 181
iTrader: 0 / 0%
 

xxkylexx is on a distinguished road

  Old

Thanks!

04-22-2006, 05:34 AM
#9
xxkylexx is offline xxkylexx
Status: Member
Join date: Apr 2006
Location:
Expertise:
Software:
 
Posts: 181
iTrader: 0 / 0%
 

xxkylexx is on a distinguished road

  Old

04-22-2006, 06:22 AM
#10
xxkylexx is offline xxkylexx
Status: Member
Join date: Apr 2006
Location:
Expertise:
Software:
 
Posts: 181
iTrader: 0 / 0%
 

xxkylexx is on a distinguished road

  Old

Any idea why I am getting this in IE only? Works great with other browsers.




Code used:
Code:
{{* ---A loop for each thumbnail---- *}}
<table width="100%">
	<tr>
		<td align="center" valign="top">
		{{section name=id loop=$image_name}}
		<div class="outer">
			<div class="middle">
				<div class="inner">
					<a href="javascript:image_details_popup('details.php?name={{$image_name[id]}}', 675, 450)"><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>
			</div>
		</div>
		{{/section}}
		</td>
	</tr>
</table>

CSS bit:
Code:
/* ~~~Start Vert Align of Div's~~~ */

.outer{
	float: left;
	width: 120px;
	height: 150px;
	overflow: hidden;
	position: relative;
	border: 1px dashed #d0dbe9;
	}
	
.outer[class]{
	display: table;
	position: static;
	}

.middle{
	position: absolute;
	top: 50%;
	} /* for explorer only*/
	
.middle[class]{
	display: table-cell;
	vertical-align: middle;
	position: static;
	}

.inner{
	position: relative;
	top: -50%
	} /* for explorer only */

.inner[class]{
	position: static;
	text-align: center;
	}

/* ~~~End Vert Align of Div's~~~ */



Thanks, yet again.

Closed Thread  
Page 1 of 2 1 2 >


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

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed