Bootstrap 3 вертикальный текст Выровнять по ionicon

Question

Я пытаюсь выровнять значок ionicon и текст на свою сторону в вертикальном пути внутри кнопки, используя Bootstrap 3.

Я хочу, чтобы текст, который будет вертикально к центру кнопка со значком также вертикально выровнена.

По умолчанию, кажется, выровняли значок и текст, используя их самые низкие точки.

Мой HTML является:

<div class="col-xs-4 text-right"> 
    <a href="/signout" class="btn btn-xs btn-danger sign-out"> 
     <i class="ion-power ion-fw"></i> 
     <span class="menu-label">Sign Out</span> 
    </a> 
</div> 

Мой CSS является:

.main-header .navbar .dropdown-menu li a.sign-out { 
    color: #fff !important; 
    vertical-align: middle; 
} 

.ion-fw { 
    width: 1.28571429em; 
    text-align: center; 
} 

Мой CSS ориентирована на пару ОК, как их цвета правильно. Я пробовал заполнение и поля на .menu-label, но это перемещает текст и значок.

Как отрегулировать текст до середины высоты значка? Благодаря!

Пример:

Answer 1

Изменить этот

.ion-fw { 
    width: 1.28571429em; 
    text-align: center; 
} 

к этому

.ion-fw { 
    width: 1.28571429em; 
    text-align: center; 
    vertical-align: middle; 
} 

vertical-align работы по элементам в том же контейнере, и поэтому должны быть применены к содержанию не ... родительский элемент.

.ion-fw { 
 
    width: 1.28571429em; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="col-xs-4 text-right"> 
 
    <a href="/signout" class="btn btn-xs btn-danger sign-out"> 
 
    <i class="ion-power ion-fw"></i> 
 
    <span class="menu-label">Sign Out</span> 
 
    </a> 
 
</div>