如何将按钮标签内的图标与文本顶部对齐，它当前位于文本的左侧。我不知道怎么办。
这是代码
<div class='nav'>
<button class="home btn">
<i class="btnIcon fa fa-home"></i>
<span>HOME</span>
</button>
</div>
最简单的方法是将跨度声明为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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
