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.

alignment check image

alignment check image

alignment check image