将文本与按钮中的图像垂直居中答案

【问题标题】：Vertically center text together with an image in a button将文本与按钮中的图像垂直居中
【发布时间】：2014-08-08 01:46:29
【问题描述】：

这很简单，我有一个按钮，我想要一个图标在它的左边。问题是按钮文本被向下推了一点，所以图标和文本没有整齐地排列。我不确定是什么原因造成的，我尝试了垂直对齐并设置了行高。

HTML

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

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

【问题讨论】：

查看 Font Awesome，我知道它不能回答您的问题，但我总是发现很难将图像与文本对齐，并且字体真棒图标完美对齐
@SamCreamer 我知道 font-awesome。我只是不打算为像一个带有图标的按钮这样简单的东西安装一个巨大的库（或完全剥离它）。就像使用 jQuery 一样，您只需在一个按钮上添加一个 eventListener。
你的观点很好

【解决方案1】：

只需将您的图像浮动到左侧，它应该是固定的：

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;
}

【讨论】：

【解决方案2】：

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;
}

已编辑：

【讨论】：