Center Twitter Bootstrap 3 Glyphicons in buttons

Question

I am now using Twitter Bootstrap 3 RC2 as well as Twitter Bootstrap which has moved into a separate repository. I have noticed, if used in a button with text the icon is no

Answer 1

Try vertical-align: middle; on .glyphicon-th:before

Answer 2

For some vertical-align might not work due to positioning: If you look into .glyphicon class you'll see it is set to relative, try setting it to 'inherit' e.g:

.glyphicon.v-centered {
    position: inherit;
    vertical-align: middle;
}

This should also work for icons not in buttons, e.g. tabs.

Answer 3

I managed to do it like this:

.glyphicon.center:before {
    vertical-align: middle;
}

and use <span class="glyphicon center glyphicon-th"></span>.

Answer 4

None of the methods above worked well for me by themselves, but using display: inline-block; vertical-align: middle on the elements did. It's the inline-block that seems to be key.

.vcenter * {
    vertical-align: middle;
    display: inline-block;
}

.btn i {
    margin-left: 10px;
    font-size: 20px;
}

with

<div class="vcenter">
  <button class="btn btn-default btn-lg"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button>
  <button class="btn btn-default"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button>
  <button class="btn btn-default btn-sm"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button>
</div>

See http://www.bootply.com/UbY78zM8pD for live example.