Vertical Alignment Problems (within a div)

[xxkylexx]

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.

{{* ---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

[Kravvitz]

vertical-align only works like valign when used in tables.

Set the line-height of those <div>s to the same as their height.

[Arbitrator]

You can vertically align content in a page division using the following CSS attributes:

<div style="display: table-cell; vertical-align: middle;"></div>

This doesn't work in MSIE however.

[xxkylexx]

I tried this and it diddn't seem to work either. (I use Firefox)


any other ideas?



Thanks!!

[Arbitrator]

I just tested that code in Firefox 1.5.0.2 to make sure and it does indeed work. Your box needs to be bigger than the content for it to have any effect however; this means that your height property needs to be specified and set to a size taller than the content for it to work.

[Kravvitz]

Oops. Sorry. It won't work because you have text under the image.

Try this.

[Arbitrator]

Just to note, if you use Kravvitz' code you may want to use a conditional comment to issue commands to MSIE instead of the star-html hack since they're fixing that hack in IE7.

[xxkylexx]

Originally Posted by Kravvitz

Oops. Sorry. It won't work because you have text under the image.

Try this.

Yea, I think that is what is causing the problems.

[Kravvitz]

Originally Posted by Arbitrator

Just to note, if you use Kravvitz' code you may want to use a conditional comment to issue commands to MSIE instead of the star-html hack since they're fixing that hack in IE7.

You don't have to. The comment before the doctype on that page puts IE6-7 in backwards compatibility mode (aka quirks mode). In backwards compatiblity mode IE7 support the star html hack; in Standards mode it doesn't.

[xxkylexx]

Great. Solution is here: http://www.jakpsatweb.cz/css/css-ver...-solution.html

[Arbitrator]

Originally Posted by Kravvitz

You don't have to. The comment before the doctype on that page puts IE6-7 in backwards compatibility mode (aka quirks mode). In backwards compatiblity mode IE7 support the star html hack; in Standards mode it doesn't.

Ah, interesting bit of information; didn't know that.

That is assuming that he wants to display his web page in quirks mode though which in and of itself can cause browser-compatibility problems.

Originally Posted by Kravvitz

Great. Solution is here: http://www.jakpsatweb.cz/css/css-ver...-solution.html

Yup, already been there. Uses more hacks though.

[xxkylexx]

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




Code used:

{{* ---A loop for each thumbnail---- *}}
<table width="100%">
	<tr>
		<td align="center" valign="top">
		{{section name=id loop=$image_name}}
		<div id="outer">
			<div id="middle">
				<div id="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:

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

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

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

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

#inner[id]{
	position: static;
	text-align: center;
	}

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

Thanks, yet again.

[Kravvitz]

Try this.

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

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

[xxkylexx]

Thanks for the reply. However, it diddn't seem to work. Any other ideas?

[Kravvitz]

I missed this yesterday, but at the top of your X/HTML code you have a note that says "A loop for each thumbnail", which leads me to believe that you have non-unique IDs which would cause problems.

IDs should be unique. You could use a class instead.

Class and ID Selectors
When should I use a class and when should I use an ID?