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 not centered very well:

The icon and the text have the same bottom line, but I believe for a good looking button the icon should be centered based on the text, shouldn't it? Any idea how to achieve this?

http://bootply.com/74652

Answer 1

Move the text out of the <span> with the glyphicon and apply vertical-align: middle; to the <span>

  <button class="btn btn-default">
    <span class="glyphicon glyphicon-th" style="vertical-align: middle;"></span> Centered
  </button>

Demo

This works in Bootstrap 4 with Font Awesome icons like so

<button class="btn btn-default" style="vertical-align: middle;">
    <i class="fa fa-times"></i> Centered
</button>

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

Apply a vertical-align: -{N}px; style on the .glyphicon-th to shift it N pixels up/down.