Aligning an image right in the centre of a div

Okay, I’m having a complete brainmelt here. I haven’t touched CSS in about 6 months and in that time I seem to have forgotten everything I ever knew!

All I’m trying to do is align an image (of variable size) right in the centre / middle of a div, so that there is an equal amount of whitespace on all four sides.

Could you point me in the right direction, please? :wink:

You can make use of an IE bug :). Read Pauls page

It gives the same idea.

Paul has just been talking about something like this in another thread today, and posted this link:

http://www.pmob.co.uk/temp/caption24.htm

Does that help?

can you post the html and css you have so far.

That get’s it in the middle vertically, but not horizontally, as far as I can tell?

I need it to do both.

Thanks!

The image is display inline (like text) so all you have to do is say text-align center on the div.

Thanks - do you have a link to the thread so I can see the accompanying commentary?

Cheers! :slight_smile:

Thats fine. For the line height method to work the div only needs the fixed height. If the div needs to be variable though you’ll need to google “vertically center element of unknown height” or wait till someone knows off the top of their head to answer. Or look on Pauls site http://www.pmob.co.uk/

The image will be of a variable height. Here’s the code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Test</title>
<style type="text/css">
<!--

body {
	margin: 40px;
	padding: 0px;
}

#div1 {
	padding: 10px;
	float: left;
	height: 280px;
	width: 280px;
	margin-top: 0px;
	margin-right: 40px;
	margin-bottom: 0px;
	margin-left: 0px;
	border: 1px solid #F00;
}

#div2 {
	padding: 10px;
	float: left;
	height: 280px;
	width: 280px;
	margin: 0px;
	border: 1px solid blue;
}

.photo {
	height: 278px;
	width: 278px;
	border: solid 1px grey;
	margin-top: auto;
	margin-bottom: auto;
	overflow: hidden;
	text-align: center;
}

.photo img.resize {
	max-width: 278px;
	width: expression(this.width > 276 ? 276: true);
	height : auto;
}

.photo img.resize {
	width : auto;
	max-height: 276px;
	width: expression(this.width > 276 ? 276: true);
}

-->
</style>
</head>

<body>


<div id="div1">
<div class="photo"><img src="imagep-large.gif" class="resize" /></div>
</div>
<div id="div2">
<div class="photo"><img src="imagep-small.gif" class="resize" /></div>
</div>

</body>
</html>


I think I’ve found an easier route. I’ve noticed that:

vertical-align: middle;
display: table-cell;

works for most modern browsers, but not IE6. Any idea of a workaround on this for IE?

Thanks. :slight_smile:

I was afraid you’d ask that. :slight_smile:

Here it is:

Not a lot in it, though.

If the div is a known height then give it equal line-height and that will vertically center it. If it’s a variable height there is a solution but I’d have to google that one myself. Paul OB has one on his sight I know.

For a general solution that includes a work-around for IE<8, see Centering Inline Elements.

cheers,

gary