webentwicklung-frage-antwort-db.com.de

Bootstrap 4: Schaltfläche Text mit Symbol ausrichten

Also mache ich einen Button mit einem Symbol auf der linken Seite. Und die Ausrichtung ist durcheinander. Mein Text stimmt nicht mit dem Symbol überein und ich habe keine Ahnung, wie ich das beheben kann. Die Linienhöhe scheint nichts zu tun. Oder berühren Sie die Auffüllung/Ränder, weil ich die Auffüllung in den Symbolbereich eingefügt habe, weil sie dunkler als der Texthintergrund ist.

Hier ist die Bildvorschau:

 enter image description here

Gibt es eine Möglichkeit, die Ausrichtung zu korrigieren? Oder gibt es eine Möglichkeit, diese Art von Schaltfläche mit Bootstrap 4 einfacher zu machen?

Hier ist mein 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>

8
Retros

Verwenden Sie align-middle-Klasse für den Bereich und das Symbol.

<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

Wenn Sie sie display: inline-block und vertical-align: middle machen, sollte dies für Sie funktionieren

.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

Versuche dies! Wenn es nicht funktioniert, geben Sie die vertikale Ausrichtung: Mitte; Eigenschaft auch auf das Symbol.

.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