Vertical Align Glyphicon in Bootstrap 3

Vertical align glyphicon in bootstrap 3

Browser Bug Explanation

According to MDN on top:

For relatively positioned elements (those with position: relative), it specifies the amount the element is moved below its normal position.

Note: Percentage is applied as a percentage of the height of the element's containing block

According to W3 on top:

For relatively positioned boxes, the offset is with respect to the top edges of the box itself (i.e., the box is given a position in the normal flow, then offset from that position according to these properties).
Note: Percentages refer to height of containing block

Here's my guess:

I think what's happening is that when the browser is first rendering the visual tree, and sees top:50%;, it looks to the parent to set the height. Since no height has been specifically applied, and it has not loaded any child contents, the height of this div (and all divs) effectively starts off as zero until otherwise indicated. It then pushes down the glyph by 50% of zero.

When you toggle the property later, the browser has already rendered everything, so the calculated height of the parent container is provided by the height of its children.

Minimal, Complete, and Verifiable Example

Note: This doesn't really have anything to do with Bootstrap or Glyphicons. In order to avoid a dependency on bootstrap, we'll add top: 1px that would have been applied by the .glyphicon class. Even though it is overwritten by 50%, it still plays an important role.

Here's a simple set of parent/child elements:

<div id="container">
    <div id="child">Child</div>
</div>

In order to simulate the toggling the property in a more repeatable fashion, we can just wait two seconds and then apply a style in javascript like this:

window.setTimeout(function() {
    document.getElementById("child").style.top = '50%';
},2000);

Example 1 (jsFiddle)

As a starting point, let's recreate your issue.

#container {
    position: relative;
    
    /* For Visual Effects */
    border: 1px solid grey;
}
#child {
    position: relative;
    height: 50px;
    top: 1px;
    
    /* For Visual Effects */
    border: 1px solid orange;
    width: 50px;
    margin: 0px auto;
    
}

Notice that as soon as you resize the window, the browser will repaint the screen and move the element back to the top.

Example 2 (jsFiddle)

If you add top: 50% to the child element, nothing will happen when the javascript adds the property because it won't have anything to overwrite.

Example 3 (jsFiddle)

If you add top: 49% to the child element, then the DOM does have something to update so we'll get the weird glitch again.

Example 4 (jsFiddle)

If you add height: 50px; to the container instead of the child, then the top property has something to position against right from the get go and you don't need to use toggle in JavaScript.

---

How to Vertically Align

If you just wanted to know how to vertically center something consistently, then you can do the following:

The trick to vertically centering text is to set the line-height equal to the container height. If a line takes up 100 pixels, and the line of text online takes up 10, then browsers will try to center the text within the remaining 90 pixels, with 45 on the top and bottom.

.glyphicon-large {
    min-height:  260px;
    line-height: 260px;
}

Solution in jsFiddle

How to vertically align an icon next to text in Bootstrap 3

You are better off using your own css for vertical alignment instead of anything from bootstrap.

You can use the following combination to vertically centre an element within its parent:

.vertically-centered {
    position: relative;
    top:50%;
    transform: translateY(-50%);
}

This is because the percentage given to translateX is relative to the size of the element.

Bootstrap columns do not by default fill the row height. In your About section that means that the divs on the left with class="col-sm-3 outline" will not be the same height as the column to the right.

This article explains how to do that.

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%);
}

Bootstrap Glyphicon Vertical Align

A quickest way to set this up would be to change your titles to 2 span tags and then pass a .tblcell class that uses the table-cell CSS property.

HTML

<h4>
    <span class="tblcell glyphicon glyphicon-info-sign" aria-hidden="true"></span>
    <span class="tblcell">Über den Verein</span>
</h4>

CSS

.glyphicon {
    position: static;
    padding-right: 10px;
}
.tblcell {
    display: table-cell;
    vertical-align: middle;
}

I also suggest not using the '& nbsp;' character you are using for padding and just use an actual CSS padding (which is what I did in your glyphicon class)

Here is a JS.Fiddle with your example. The change has only been applied to your first title. Hope that helps.

Align Bootstrap glyphicons vertically with text on both sides?

you have to wrap the text with span then float it, and clear it at each 4 item. And you need to use min-width

Right align text before the glyphicon is what I meant to say.

Then use text-align:right

div {  display: inline-block;  border: dotted 1px red;  vertical-align: middle;  padding: 5px}div span {  float: left}div span:nth-of-type(3n+1) {  clear: left;  text-align: right}div:first-of-type span:nth-of-type(3n+1) {  min-width: 70px;}div:last-of-type span:nth-of-type(3n+1) {  min-width: 120px}.glyphicon {  margin: 2px 5px}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /><div>  <span> usernad</span>  <span class="glyphicon glyphicon-user"></span><span> ape </span>  <span>dads</span>  <span class="glyphicon glyphicon-user"></span>  <span>stack</span>  <span>defdood</span>  <span class="glyphicon glyphicon-user"></span>  <span>rocks</span>  <span>eleminem </span><span class="glyphicon glyphicon-user"></span><span> boom</span></div><div>  <span> te43st@gmail.com</span>  <span class="glyphicon glyphicon-envelope"></span>  <span>tester32</span>  <span>te44st@gmail.com</span>  <span class="glyphicon glyphicon-envelope"></span><span>fourteenppl</span>  <span>test32@gmail.com</span>  <span class="glyphicon glyphicon-envelope"></span>  <span>eleven</span>  <span>test@gmail.com</span>  <span class="glyphicon glyphicon-envelope"></span>  <span>goo</span></div>

Vertical align Glyphicons with text CSS

This should work, text-align: center should be added to the parent element because span is an inline element and does not have a width.

span.glyphicon {  font-size: 1.7em;}
li {  list-style: none;  text-align: center;}
li a {  display: inline-block;}

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<ul>  <li>    <a class="dropdown-toggle" href="{% url 'Homepage' %}">      <span class="glyphicon glyphicon-home"></span>      <div class="navtab"> Accueil </div>    </a>  </li></ul>

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>

---

Related Topics