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

Question

如何将按钮标签内的图标与文本顶部对齐，它位于文本左侧。我无法弄清楚如何。

下面是代码

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

Answer 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>