包含框中垂直对齐的新手简单布局

Question

需要在包含框中垂直对齐图像，如下所示：

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

用这个：

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

vertical-align无法正常工作。我该如何对齐？

THX

Answer 1

将此CSS分配给图片vertical-align: middle;，并将此行CSS添加到.image-box line-height: 75px;。 height和line-height的值应该相同 示例：http://jsfiddle.net/SjKUa/1/

Answer 2

添加此项并可能将0更改为图像之间所需的空间。这会将它们排列在列内部的中心位置，这就像您所看到的那样。

 .image-box img {
    margin: 0 auto;
 }