Vertically Text in einem Bootstrap-Anker (Knopf) ausrichten

Question

ich vertikal Text ausrichten zu kämpfen bin innerhalb eines Bootstrap (3) <a>, wenn es richtig in einem

The HTML <button>

funktioniert:

<button class="btn">some text<span class="glyphicon glyphicon-play pull-right"></span></button> 
</br> 
</br> 
</br> 
<a href="#" class="btn">some text<span class="glyphicon glyphicon-play pull-right"></span></a> 

Die CSS:

.btn { 
    width: 315px; 
    height: 40px; 
    background-color: #ff38a4; 
    color: #fff; 
    display: inline-block; 
    margin-bottom: 0; 
    font-weight: normal; 
    text-align: left; 
    vertical-align: middle; 
    -ms-touch-action: manipulation; 
    touch-action: manipulation; 
    cursor: pointer; 
    background-image: none; 
    border: 1px solid transparent; 
    white-space: nowrap; 
    padding: 4px 8px; 
    font-size: 14px; 
    line-height: 1.42857143; 
    border-radius: 0; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    -webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.5); 
    -moz-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.5); 
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.5); 
} 

Und die Ausgabe:

Und ein codepen des Problems: http://codepen.io/anon/pen/vyOaao

Wie ausrichten ich den Text und Symbol einen <a> Tag zentral mit?

Answer 1

Warum verwenden Sie </br></br></br>? vertical-align with Bootstrap 3 könnten Sie diese

Answer 2

Nutzung helfen:

a.btn { 
    background-color: #ff38a4; 
    border-radius: 0; 
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.5); 
    color: #fff; 
    cursor: pointer; 
    display: flex; 
    font-size: 14px; 
    font-weight: normal; 
    justify-content: space-between; 
    margin-top: 1rem; 
    padding: 14px 14px 14px; 
    width: 315px; 
} 

die Geige Siehe: https://jsfiddle.net/ck0s48ab/

Hier wie oben Sie display: flex;

Answer 3

Verhindert, dass der angegebene Wert line-height verwenden können: