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)
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
- Remove the
pull-right
class from your hidden button. This class adds thefloat: right;
property. If I understand correctly, this is not appropriate for your task. - 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 thecenter-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
Is It Bad Practice to Use Negative Margins or Padding in CSS
Div with Scrollbar Inside Div with Position:Fixed
Offset Scroll Anchor in HTML with Bootstrap 4 Fixed Navbar
Firefox Line-Height Issue with Input Fields
How to Add CSS Files to a Custom Module in Odoo
Make Div Inside Parent 100% Width of Body, Not Parent Div
Why Do /**/ Comments Work in Stylesheets But // Comments Don'T
Yui Reset CSS Makes <Strong><Em>This Not Work</Em></Strong>
Font Face Not Working in IE8 as Expected
What Is the Default Style of the Blue Focus Outline in Chrome
How to Set CSS Width Equal to Length of Longest Text
Table Cell Loses Border When CSS Gradient Filter Is Applied in IE8
Change Navbar Height in Bootstrap3