web-dev-qa-db-ja.com

Bootstrap 4：ボタンでテキストをアイコンに揃える

そこで、左側にアイコンのあるボタンを作成しています。そして、アライメントが台無しになります。テキストがアイコンの中央に揃わず、これを修正する方法がわかりません。行の高さは何もしないようです。または、テキスト領域よりも暗くする必要があるため、アイコン領域にパディングを追加したため、パディング/マージンに触れます。

画像のプレビューは次のとおりです。

enter image description here

アライメントを修正する方法はありますか？または、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>
htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4
8
Retros

使用する 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

6
Zim

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>
0
Paul

これを試して！動作しない場合は、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>
0
Adnan S