在按钮标签内的文本上方对齐图标 [英] align icon on top of text inside button tag
本文介绍了在按钮标签内的文本上方对齐图标的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何将按钮标签内的图标对准文本的顶部,当前它位于文本的左侧.我不知道怎么办.
How can I align the icon inside a button tag to the top of the text, it is currently on the left side of the text. I can't figure out how.
这是代码
<div class='nav'>
<button class="home btn">
<i class="btnIcon fa fa-home"></i>
<span>HOME</span>
</button>
</div>
推荐答案
最简单的方法是将跨度声明为 display:block
The simplest method would be to just declare the span as 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和列布局
Or use Flexbox and column layout
.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>
这篇关于在按钮标签内的文本上方对齐图标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文