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

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

Answer 3

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 4

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

Answer 5

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.

Answer 6

I managed to do it like this:

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

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

Answer 7

Problem: Glyph icon was 2 px too high above the button text. Fixed it as follows using examples here. Thank you (Alastair Maw).

I managed to get mine working as follows:

HTML

<div class="col-xs-12">
    <a title="" class="btn btn-block btn-info oa-btn-spacer_homepage oa-ellipsis" role="button" href="default.aspx?action=page&name=creditcard">
        <span class="glyphicon glyphicon-credit-card glyph_Credit"></span> Update Your Credit Card and Billing Information
    </a>
</div>

CSS

#panelTopic  .glyph_Credit {
    vertical-align: middle;
    display: inline-block;
    padding-bottom:6px;
}

Answer 8

<button class="btn btn-default">
          <span class="glyphicon glyphicon-th" style="font-size: 14px;"> </span>
          <span style="font-size: 17px;">Not Centered</span>
    </button>

please increase or decrease the font size according to your requirement

Answer 9

Other way

<button class="btn default" id="IdBack">
  <i class="glyphicon glyphicon-hand-left"></i> 
  <b>Back</b>
</button>

Answer 10

Add a margin of the specific pixels or percentage. In my app, this worked beautifully, based on the dimensions of the area.

CSS:

.someWrapperClass button span {
    margin-top: 120%;
}

HTML:

<div class="someWrapperClass">
    <button type="button" ng-click="SomeMethod()">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </button>
</div>