vertical center an image without knowing dimensions

Question

I have centered a lot of stuff in my webdevelopment career, but I was wondering if there is a simple way to centering an image vertically without knowing the image\'s dimens

Answer 1

There is a trick to do this, even without Javascript. What we need ist to know the height of the parent and we also need one more tag.

First, add a SPAN-tag before or after the IMG-Tag:

With this, the following CSS declaration aligns the image as wanted:

#parent {
   height: 500px;      /* This height is important for the following lines */

   line-height: 500px; /* Text-content needs to get full height for the
                          'vertical-align'-attribute to work */
}
#parent span {
   display: inline-block; /* Should work even for IE6/7 in this case */

   height: 500px;         /* Needed for IE */

   width: 10px;
   margin-right: -10px;   /* Any element to the right is pushed to the left
                             offset of the SPAN-tag */ 
}
#parent img {
   vertical-align: middle; /* Aligns the image in the middle of the SPAN-tag */
}

This should work even for IE6 and 7.

Edit:

• ThinkingStiffs solution is simpler and thus better. I just doesn't work in IE6.

• Purmous solution doesn't work for IE6 and 7, see The display declaration