Vertical Aligning an image

Hi,

how do I center align an image within a div tag? i tried "vertical-align:middle", but it doesnt work...Here's my page:

http://www.telesx.com/Temp/test/image.htm

Thanks

 

Working in FF & IE7, if would of been better to simply apply a class to the image, rather than div's

apply auto margins for the image, see if that solves the problem.

 

I'm not a big fan of using more markup than needed just to make something work in CSS, so a purist will probably disagree with me on this, but;


One way of doing it is to set the image as the background image of the DIV:

CSS:

.hasImage {
height:180px;
width:280px;
background-position: center center;
background-repeat:no-repeat;
border:solid 3px aqua;
}

Code (markup):

HTML:

<div class="hasImage" style="background-image:url(http://www.telesx.com/Temp/test/CDP-88.jpg)">
</div>

Code (markup):

I put the background image location inline simply because in applications I write I would output this information dynamically within the template engine itself, making it more logical to put the location of the image here rather than in the stylesheet itself.


Another way of accomplishing this would be to absolutely position the image within the div:

CSS:

.hasImage {
position:relative;
height:180px;
width:280px;
border:solid 3px aqua;
}
.hasImage img{
	position:absolute;
	top:50%;
	left:50%;
	margin:-21px 0 0 -125px;
}

Code (markup):

HTML:

<div class="hasImage">
	<img src="http://www.telesx.com/Temp/test/CDP-88.jpg" alt="" />
</div>

Code (markup):

Depending on the application, it might be more fitting to write the margin of the image inline. If it's static content, writing in the stylesheet would be more desirable, but if it's dynamic content such as a list of images you'll want to put it inline.


There might be better solutions depending on what you're doing, but this works quite well for me.


Of course, you could always resort to using a table...

 

If you just had to worry about modern browsers, you could simply do this:

div#imageGoesHere{
    display: table-cell;
    vertical-align: middle;
    height:180px;
    width:280px;
    background:aqua;
    text-align:center;
    }
	
div#imageGoesHere img{}

Code (markup):

But, I'll guess you have visitors that use old obsolete browsers like IE 6 & 7, so you'll need another solution.

Unless you're just really anal about wanting to avoid tables, I'd recommend a single celled table for each image. If you do want a css solution, say so, and I'll get you one.

cheers,

gary