Bootstrap 3将文本垂直对齐到ionicon

Question

I am trying to align an ionicon icon and text to its side in a vertical way inside a button using Bootstrap 3.

I want the text to be vertically aligned to the center of the button with the icon also vertically aligned.

The default seems to align the icon and the text using their lowest points.

My HTML is:

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

My CSS is:

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

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

My CSS targets the pair OK as their colors are correct. I have tried padding and margins on .menu-label but that moves the text and icon.

How do I adjust the text to the middle of the icon's height? Thanks!

Example:

Answer 1

Change this

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

to this

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

vertical-align works on elements in the same container and so must be applied to the contents...not the parent element.

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

Answer 2

This works for me:

 .ion-fw { display: inline-block; vertical-align: bottom; height: 1.4em; font-size: 1.1em; } 

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