Html Bootstrap 4：按钮将文本与图标对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43759462/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4: Button align text with icon
提问by Retros
So I'm making a button with an icon on the left. And the alignment is messed up. My text doesn't middle align with the icon and I have no idea how to fix this. Line-height doesn't seem to do anything. Or touching the padding/margins because I've added the padding to the icon area because I need it to be darker than the text background.
所以我正在制作一个带有左侧图标的按钮。而且对齐方式很混乱。我的文字没有与图标中间对齐，我不知道如何解决这个问题。行高似乎没有做任何事情。或者触摸填充/边距，因为我已将填充添加到图标区域，因为我需要它比文本背景更暗。
Here's the image preview:
这是图像预览：
Is there a way I can fix the alignment? Or is there a way to do this type of a button easier with Bootstrap 4?
有没有办法修复对齐？或者有没有办法使用 Bootstrap 4 更轻松地完成这种类型的按钮？
Here's my code:
这是我的代码：
.btn-primary {
background-color: #3382c7;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
span {
padding-left: 25px;
padding-right: 25px;
}
i {
font-size: 20px;
background-color: #306fa5;
padding: 15px 20px;
}
}<a href="#" class="btn btn-primary border-0 rounded-0 p-0">
<i class="fa fa-play" aria-hidden="true"></i>
<span>Click here to Play</span>
</a>采纳答案by Zim
Use align-middleclass on the span and icon..
align-middle在跨度和图标上使用类..
<div class="container">
<a href="#" class="btn btn-primary border-0 rounded-0 p-0">
<i class="fa fa-play align-middle" aria-hidden="true"></i>
<span class="align-middle">Click here to Play</span>
</a>
</div>
回答by Paul
If you make them display: inline-blockand vertical-align: middleit should work for you
如果你制作它们display: inline-block并且vertical-align: middle它应该适合你
.btn-primary {
background-color: #3382c7;
display: inline-block;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
}
.btn-primary span {
display: inline-block;
padding-left: 25px;
padding-right: 25px;
vertical-align: middle;
}
.btn-primary i {
font-size: 20px;
display: inline-block;
background-color: #306fa5;
padding: 15px 20px;
vertical-align: middle;
}<a href="#" class="btn btn-primary border-0 rounded-0 p-0">
<i class="fa fa-play" aria-hidden="true"></i>
<span>Click here to Play</span>
</a>回答by Adnan S
Try this! if it doesn't work try giving the vertical-align:middle; property to the icon too.
尝试这个！如果它不起作用，请尝试提供 vertical-align:middle; 图标的属性也是如此。
.btn-primary {
background-color: #3382c7;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
span {
padding-left: 25px;
padding-right: 25px;
}
i {
font-size: 20px;
background-color: #306fa5;
padding: 15px 20px;
vertical-align:middle;
}
}<a href="#" class="btn btn-primary border-0 rounded-0 p-0">
<i class="fa fa-play" aria-hidden="true"></i>
<span>Click here to Play</span>
</a>