Вертикально выравнивание текста в загрузочном якоря (кнопка)

Question

Я изо всех сил, чтобы выровнять текст по вертикали в пределах Bootstrap (3) <a>, когда он работает должным образом в <button>

The HTML:

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

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); 
} 

И выход:

И codepen проблемы: http://codepen.io/anon/pen/vyOaao

Как выровнять текст и значок в центре, используя <a> тег?

Answer 1

Почему вы используете </br></br></br>? vertical-align with Bootstrap 3 может помочь вам

Answer 2

Используйте это:

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; 
} 

Смотрите скрипку: https://jsfiddle.net/ck0s48ab/

Здесь, как и выше, вы можете использовать display: flex;

Answer 3

Предотвращает заданное значение высоту строки: