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

【问题标题】：Bootstrap 4: Button align text with iconBootstrap 4：按钮将文本与图标对齐
【发布时间】：2017-10-01 06:01:04
【问题描述】：

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

这是图片预览：

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

【问题讨论】：

你应该设置a标签的填充，以便文本放在中间，即使你把它像padding: auto;一样可能也可以工作

标签： html css twitter-bootstrap bootstrap-4 twitter-bootstrap-4

【解决方案1】：

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

【讨论】：

【解决方案2】：

在跨度和图标上使用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>

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

【讨论】：

我试过你的 sn-p，如果你删除了 align-middle 类没有任何变化

【解决方案3】：

试试这个！如果它不起作用，请尝试给出垂直对齐：中间；图标的属性。

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

【讨论】：