如何在span标签中水平和垂直居中图像？

Question

我在img标记内使用了span标记。我已将span标记的显示设置为内联块并赋予其背景颜色。如何将图像置于span标记内？

<span class='plus' id='plus_block_1'> <img src='images/plus.png' /> </span>

CSS：

.plus {
  display: inline-block;
  background-color: #e1e1e1;
  height: 40px;
}

Answer 1

您可以通过为.plus提供与元素高度匹配的行高来实现此目的。然后将img设置为vertical-align: middle。

参见示例（高度的两倍以使其清晰）：http://jsfiddle.net/1om0emoe/