Bootstrap 4：按钮将文本与图标对齐

Question

所以我正在制作一个左侧带有图标的按钮。 对齐搞砸了。 我的文字中间没有与图标对齐，我不知道如何解决这个问题。 线高似乎没有做任何事情。 或者触摸填充/边距因为我已经将填充添加到图标区域，因为我需要它比文本背景更暗。

这是图像预览：

有没有办法可以修复对齐方式？ 或者有没有办法使用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> 

Answer 1

在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>

http://www.codeply.com/go/xuiy1703Dv

Answer 2

试试这个！ 如果它不起作用尝试给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> 

Answer 3

如果你让它们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>