CSS and How to Center Images of Unknown Size

When DMC launched our new website a few months ago, we were quite happy with some of the new skills and tricks we learned. One area where I learned quite a bit more, in particular, was CSS, or Cascading Style Sheets, and html style tags.

One issue we had to overcome involved centering images of varying or unknown size. We use a content rotator module on our website. There are numerous content rotator modules available for Dot Net Nuke. The content rotator we used comes from a company called MexMax.

You will notice on our home page that we use this content rotator to scroll through our list of clients. To make the layout pleasing to the eye, we had to center all of the images. If you search for a tutorial on how to do this, you will find that they all involve hard coding in height values and assume that you know the size of your image and the size of the space you are trying to fit it in. We could have used this, and gone the route of always forcing the client logos to be the same size, but I wanted something more modular.

Here is what we came up with:

We wrapped the image in four separate divs and gave each div a class name:

<div class="RotatorImgCenterWrap1">
	<div class="RotatorImgCenterWrap2">
		<div class="RotatorImgCenterWrap3">
			<div class="RotatorImgCenterWrap4">
				<a href="/Link.aspx"><img height="62" width="175" src="/Image.jpg" /></a>
			</div>
		</div>
	</div>
</div>

Next we set the CSS for each class as follows:

div.RotatorImgCenterWrap1 {}

div.RotatorImgCenterWrap2 {
	display: table;
	height: 100%;
	width: 100%;
	#position: relative;
	overflow: hidden;
}

div.RotatorImgCenterWrap3 {
	#position: absolute;
	#top: 50%;
	width: 100%;
	display: table-cell;
	vertical-align: middle;
}

div.RotatorImgCenterWrap4 {
	#position: relative;
	#top: -50%;
	width: 100%;
	text-align: center;
}

.RotatorImgCenterWrap4 img {
	vertical-align: middle;
}

I'll give a brief explanation as to how this works. First, the outer most div, RotatorImgCenterWrap1, is a 'throw away' div. This is necessary because the content rotator we used overwrites the style of this outermost div; this is just how the module works. It forces the following styles, which, as you can see, causes us some issues with what we are trying to do:

position: absolute; top: 0pt; left: 0pt; display: block;

Next we have TotatorImgCenterWrap2, which we set to table display (we are going back to the old school methods for this). Note that the # is in front of styles that we only want applied to IE. (IE and Firefox cross compatibility always seems to come into play when you are doing something tricky in CSS). The purpose of this div is largely to create a non-relative div that we can center objects in.

RotatorImgCenterWrap3 is positioned to be a table-cell beginning at 50% of the way down from the top of RotatorImgCenterWrap2. This is done with the position: absolute and top: 50% styles in IE. The vertical-align: middle in other browers positions this in a slightly different place: the exact middle, which is where we want it..

Finally, we have RotatorImgCenterWrap4. This is really only necessary to finish off the IE fix; we have the divs centered on other browsers at this point. This is done by moving the top position 50% above (top: -50%) and outside of the previous div.

The only style needed for centering horizontally is text-align: center;.

We just threw this together so I am curious if others have improvements (do I have unnecessary steps that could be removed?) or are aware of simpler ways to do this.