it-roy-ru.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>

8
Retros

Используйте класс align-middle на span и значке.

<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

7
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

Попробуй это! если это не сработает, попробуйте задать вертикальное выравнивание: 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