Question

Need to vertically align images within a containing box like this:

   <span class="image-box"><img src="/1_thumb.jpg"></span>

with this:

.image-box{
  width: 75px;
  height: 75px;
  display: block;
  float: left;
  text-align: center;
  // ????
  vertical-align: text-top;
}

The vertical-align is not working correcty. How would I align this?

thx

Answer 1

Assign this CSS to the image vertical-align: middle; and add this line of CSS to the .image-box line-height: 75px;. The value for height and line-height should be the same.
Example: http://jsfiddle.net/SjKUa/1/