所以我正在制作一个左侧带有图标的按钮.对齐搞砸了.我的文字中间没有与图标对齐,我不知道如何解决这个问题.线高似乎没有做任何事情.或者触摸填充/边距因为我已经将填充添加到图标区域,因为我需要它比文本背景更暗.
这是图像预览：
有没有办法可以修复对齐方式？或者有没有办法使用Bootstrap 4更容易地使用这种类型的按钮？
这是我的代码：
.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>
解决方法
在span和icon上使用align-middle class ..
<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>
