Geek Answers Handbook

Glyphicon and Button text should be side by side

I am trying to place a glyphicon inside a control button, but the button text and glyphicon are not on the same line. The button text is slightly lower and is not parallel to the glyph.

<button type="button" class="btn btn-default" aria-label="my button" style="border: 0px">
    <span class="glyphicon glyphicon-plus-sign" style="color:#a0a0a0; font-size: 30px" aria-hidden="true"></span>
    My Button Text
</button>
+4
source share
2 answers

should be vertical-align: middle;up to the glyphic range where you placed the inline CSS

<button type="button" class="btn btn-default" aria-label="my button" style="border: 0px">
       <span class="glyphicon glyphicon-plus-sign" style="color:#a0a0a0; font-size: 30px; vertical-align: middle;" aria-hidden="true"></span>
       My Button Text
</button>

What is it:)

+6
source

You can use bootstrap and css system as below:

<button type="button" class="btn btn-default" aria-label="my button" style="border: 0px">
    <div class="col-md-2">
       <span class="glyphicon glyphicon-plus-sign" style="color:#a0a0a0; font-size: 30px" aria-hidden="true"></span>
    </div>
   <div class="col-md-10" style="padding-top:5px;  margin-left: -4px">
   My Button Text
   </div>
</button>
0
source

More articles:


All Articles