Go home. These are ancient pages no longer being maintained.

Centered Image

How to center an image (of arbitrary size) inside an element (of known size).

First, center the image horizontally with text-align:center. In CSS2 browsers we can use display:table-cell and vertical-align:middle (in the table-cell context) to vertically center the image. Since the image generates a line-box that's a few pixels taller than the image, use vertical-align (the inline version) on the IMG itself to further sure up the centering.

Since IE doesn't support display:table-cell, we vertically center the image by toying with the height of IE's line box. With a little experimentation I found you need to give the container font-size: (height of container * .905)px. This ratio works regardless of the height of the container or the image.