對齊按鈕標籤內文本頂部的圖標

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>