在按钮标签内的文本顶部对齐图标

【问题标题】：align icon on top of text inside button tag在按钮标签内的文本顶部对齐图标
【发布时间】：2017-10-20 19:21:24
【问题描述】：

如何将按钮标签内的图标与文本顶部对齐，它目前位于文本的左侧。我不知道怎么做。

这里是代码

<div class='nav'>
  <button class="home btn">
      <i class="btnIcon fa fa-home"></i>
       <span>HOME</span>
    </button>
</div>

【问题讨论】：

请注意，您有一个错字 - 您的结束跨度实际上是一个开始跨度

标签： html css twitter-bootstrap-3

【解决方案1】：

最简单的方法是将跨度声明为display:block

span {
  display: block;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class='nav'>
  <button class="home btn">
  <i class="btnIcon fa fa-home"></i>
   <span>HOME</span>
</button>
</div>

或者使用 Flexbox 和列布局

.btn.vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class='nav'>
  <button class="home btn vertical">
  <i class="btnIcon fa fa-home"></i>
   <span>HOME</span>
</button>
</div>

【讨论】：