I am attempting to vertically align an ionicon icon and text next to each other inside a button using Bootstrap 3.
My goal is to have both the text and the icon centered vertically within the button.
By default, it seems that the icon and text are aligned based on their lowest points.
Here's my HTML setup:
<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>
And here's the CSS I'm using:
.main-header .navbar .dropdown-menu li a.sign-out {
color: #fff !important;
vertical-align: middle;
}
.ion-fw {
width: 1.28571429em;
text-align: center;
}
The CSS styles seem to be targeting the elements correctly as the colors display properly. I've experimented with padding and margins on .menu-label, but this ends up moving both the text and the icon.
Can anyone suggest a way to adjust the text so that it aligns with the middle of the icon's height? Thank you!
For reference, please see the example image below: https://i.sstatic.net/b5ctd.png