Center Twitter Bootstrap 3 Glyphicons in Buttons

Center Twitter Bootstrap 3 Glyphicons in buttons

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>

How to Centre Glyphicon Vertically In Bootstrap Button

Try this http://plnkr.co/edit/06lYcyqGYn5IC6U9N3uR?p=preview

.add-podcast-btn {
margin-top: 100px;
margin-left: 100px;
font-size: 11px;
text-align: center;
width: 25px;
height: 25px;
position: relative;
}

.glyphicon-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Add Glyphicon to Every Button (bootstrap 3.5)

Button Style with Gylph-icons

I thing you might wants above image Output for your all the buttons.

For that you need to just write simple css :after class css to apply on all default buttons after text:

.btn-default:after {
content: "\e080";
font-family: 'Glyphicons Halflings';
font-size: 9px;
vertical-align: middle;
padding: 6px 5px;
color: #0099FF;
}

this will work for your all buttons as shown in image.

How do I center Glyphicons horizontally using Twitter Bootstrap

All you need is to define display:block with text-align:center in the i inside your container div and you'll have it:

.col-lg-4 i {
display:block;
text-align:center
}

Here is a demo

EDIT #1: As this answer seems to get some traction, it is worth to note that the more "twitter-bootstrapy" way of doing this would be what @SimoneMelloni suggested in their answer to this question, ie. the use of the text-center class.

Note that this is basically the same as my solution, considering all text-center does is set text-align:center, it is just making use of a twitter bootstrap feature.

Also note that text-align:center only works on block-level elements or ones where you explicitly set display:block, as in my original answer above. There I needed to specify that because I used it on the i tag, which is an inline element.

EDIT #2: I just saw your [OP] edit on the center element: while it is indeed not CSS but HTML, that's less of an issue, the bigger issue with it is that it's obsolete. See more info on it on MDN's doc on the <center> element

center button and glyphicon on different lines

  1. Remove the pull-right class from your hidden button. This class adds the float: right; property. If I understand correctly, this is not appropriate for your task.
  2. There is a problem that a free space arises between <span> elements. You can find several solutions in this question. But I suggest turning these <span>s into blocks. You can remove the <br> tag, add the center-block class to both icons and a button and define some top margin for the button. After that, you can remove the parent <p> block, if you want.

I also deleted the hide class from the first icon and the button to make the result visible:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

#reload-btn {

margin-top: 10px;

}

#questionmark {

font-size: 15px;

color: purple;

border-bottom: 2px solid purple;

padding: 0 10px 2px 10px;

}

.btn {

font-family: Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

}

p {

font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;

}

.valign{

line-height:46px;

vertical-align:middle;}

.glyphicon-ok-sign {

font-size: 40px;

color: green;

}

.glyphicon-warning-sign {

font-size: 40px;

color: red;

}

.hide {

display: none;

}

#display-sentence {

display: none;

}

.highlight {

background-color: yellow;

}
<div class="container">

<h1 class="text-center text-primary">¿POR O PARA?</h1>

<br>

<div class="jumbotron">

<br>

<p><span id="test-sentence"></span></p>

</div>

<div class="col-xs-10 col-xs-offset-1">

<div class="row">

<div class="col-xs-4">

<button type="button" class="btn test-btn btn-primary btn-lg" id="por-btn">por</button>

</div>

<div class="col-xs-4 text-center valign">

<!-- I'm trying to center the following, only one glyphicon will be desplayed at a time, along with the #reload-btn -->

<span class="glyphicon glyphicon-ok-sign center-block"></span>

<span class="glyphicon glyphicon-warning-sign hide center-block"></span>

<button type="button" class="btn btn-success btn-lg center-block" id="reload-btn">¡OTRA!</button>

</div>

<div class="col-xs-4">

<button type="button" class="btn test-btn btn-primary pull-right btn-lg" id="para-btn">para</button>

</div>

</div>

</div>

</div>

Bootstrap buttons with glyphicon

padding-top and -bottom in class .btn need to be overwritten to 0px each; font needs to be increased until the overall button is returned to the previous size. In .glyphicon, top must be zeroed. Finally, after viewing the page in firebug, there's a padding definition in the js file (padding-top:0 and -bottom:0) causing a sliver of space to remain. It looks like your "js" css file defines a padding-top and -bottom property; when I removed these in Firebug, all remaining space was removed. You might need to play around with the presence of !important on the padding-top and -bottom properties, meaning thoroughly overwrite the padding properties in their original classes if you don't use them.

.txt {
vertical-align: middle;
padding-left: 15px;
padding-right: 15px;
padding-top: 0px;
padding-bottom: 0px;
text-align: center;
}

.btnbtn {
padding: 0px;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
text-align: center;
}

.glyphbtn {
padding-top: 4px;
padding-bottom: 4px;
padding-right: 7px;
padding-left: 7px;
text-align: center;
}

.btn {
padding-bottom: 0 !important;
padding-top: 0 !important;
font-size: 22px !important;
}

.glyphicon {
top: 0 !important;
}

Bootstrap 3 align button text underneath GlyphIcon

Add the text-center helper class to the .btn, and add a <br> after the icon, before the text.

<button type="button" class="btn btn-default btn-lg text-center"><span class="glyphicon glyphicon-share"></span><br>Resend</button>

Demo: http://www.bootply.com/SWzsbPwPWC



Related Topics



Leave a reply



Submit