html - 如何在按钮内定位文本？

Question

我现在只是在图标上使用 float: left 因为我正在努力定位按钮中的文本，以便图标位于“中间”(左侧的 20%)文本在中间(右边的 80%)。

像这样:

**********************************
*   Icon     Text will be here   *
*                                *
**********************************

这是我设置按钮的方式:

<button class="button button-block">
    <i class="ion-plus-round"></i><span>Add to Favorites</span>
</button>   

Answer 1

尝试 CSS flexbox :

#container {
  display: flex;
  align-items: center;
}
#container > * {
  margin-right: 5px;
}

<button>
  <span id="container">
      <img src="http://i.imgur.com/60PVLis.png" width="25" height="25" alt="">
      <span>Add to Favorites</span>
  </span>
</button>

我使用 span 来包装内容，因为 some browsers don't accept button elements as flex containers .

---

浏览器支持

所有主流浏览器都支持 Flexbox，except IE 8 & 9 .一些最新的浏览器版本，例如 Safari 8 和 IE 10，需要 vendor prefixes .要快速添加前缀，请使用 Autoprefixer .更多详细信息，请参阅 this answer .