Question

The problem:

I have a set width and height image Lets say height:160px; width:200px; with an image in each box.

The image can vary in size but I need a solution that will always center the image vertically and horizontally within the box no matter what it’s size.

Horizontal doesn’t seem to be a problem by using margin: 0 auto but vertical is proving difficult. I have tried vertical align: center but this doesnt appear to work either

Any help is appriciated
Thanks

Answer 1

center is not a valid value for vertical-align (you’re probably confusing it with middle). Still, vertical-align isn’t the correct method here and is often a misunderstood property. I’ve recommended the following site a few times and it should help you, too:

http://phrogz.net/css/vertical-align/index.html