3

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.

Community
  • 1
  • 1
hrokr
  • 3,276
  • 3
  • 21
  • 39

1 Answers1

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.

RBdorf
  • 26
  • 2
  • Thanks for the answer. I tried the code and it mostly worked. That is, translateY needs to be 50% as opposed to -50%. If you'll be so kind as to make the correction, I'll mark it as solved. – hrokr Mar 09 '16 at 22:38
  • @hrokr That is strange that it worked for you, it is definitely not that way when you look at this codepen http://codepen.io/anon/pen/qZNmxw – RBdorf Mar 10 '16 at 23:09
  • Yeah, I agree but that is definitely what was needed in the one I had. I'm at a loss for why that's the case. – hrokr Mar 11 '16 at 04:35