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

Question

I'm trying to vertically center a Bootstrap glyphicon in one column with the text of another column. I've tried doing it as a table, I've tried it as a ghost cell (ref: Centering in the unknown ). Ideally, I like to find there is something I'm missing that doesn't require tables (which I've also tried), but for now, I'll try anything.

I've posted an example of what I currently have on bootply and outlined the borders for ease of viewing.

I'm really stuck, even after mining StackOverflow and the web for an answer on this so, thanks very much for your help.

Answer 1

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.