垂直居中文本和按钮中的图像

Question

这很简单，我有一个按钮，我想要一个左侧的图标。问题是按钮文本向下推了一点，因此图标和文本不能整齐排列。我不确定是什么导致了这种情况，我尝试了纵向对齐并设置了行高。

http://codepen.io/anon/pen/EKlFb

HTML

<button>
  <img src="http://img.informer.com/icons/png/16/3995/3995186.png"/>OBS
</button>

CSS

button {
  font-weight: bold;
  height: 27px;
  line-height: 27px;
  vertical-align: middle;
}

Answer 1

Working Fiddle

请尝试以下操作：

<button>
   <img src="http://img.informer.com/icons/png/16/3995/3995186.png" alt="" class="icon"/>
   <span>OBS</span>
</button>

CSS：

button img,
button span {
  vertical-align: middle;
}

Editted：

Fiddle

Answer 2

只需将图像浮动到左侧即可修复：

<强> HTML：

<button>
  <img src="http://img.informer.com/icons/png/16/3995/3995186.png" alt="" class="icon"/>
  OBS
</button>

<强> CSS：

button {
  font-weight: bold;
  height: 27px;
}

button > .icon
{
  float: left;
}

CodePen