web-dev-qa-db-fra.com

Bootstrap 4: Bouton aligner le texte avec l'icône

Je crée donc un bouton avec une icône à gauche. Et l'alignement est foiré. Mon texte ne s'aligne pas au milieu avec l'icône et je ne sais pas comment résoudre ce problème. La hauteur de ligne ne semble rien faire. Ou en touchant le remplissage/les marges parce que j'ai ajouté le remplissage à la zone des icônes parce que j'ai besoin qu'il soit plus foncé que l'arrière-plan du texte.

Voici l'aperçu de l'image:

 enter image description here

Y a-t-il un moyen de réparer l'alignement? Ou est-il possible de faire ce type de bouton plus facilement avec Bootstrap 4?

Voici mon code:

.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

Utilisez la classe align-middle sur l'étendue et l'icône.

<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

Si vous les créez display: inline-block et vertical-align: middle cela devrait fonctionner pour vous

.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

Essaye ça! si cela ne fonctionne pas, essayez de donner le vertical-align: middle; propriété à l'icône aussi.

.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