CSS / Bootstrap: Text align vertically center

Question

I have a webproject using bootstrap. There is an Layout with two columns. The left column has an image and the right one has an text. The text should be vertically centered to the image. The first problem was to get the columns the same height. I found the following working solution:

.col {
  margin-bottom: -99999px;
  padding-bottom: 99999px;
  height:100%;
}

To get the text centered vertically I inserted the following html in the right row:

<div class="table">
  <div class="cell">My text</div>
</div>

CSS:

.table {
  height:100%;
  width:100%;
  display:table;   
}

.cell {
  display:table-cell;
  vertical-align:middle;
  height:100%;
}

But I don't get the table and its cell to height 100% of the parent. Position absolute not working too, because bottom:0 is 99999px;

Anybody has an idea what I can do? Thanks

take a look [here](http://stackoverflow.com/a/489394/4290598). — WayneEra, Mar 01 '16 at 15:06
Perhaps use an alternative method of making the columns equal height - http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height — Paulie_D, Mar 01 '16 at 15:36

Marco-dev · Accepted Answer · 2016-03-01T15:26:10.640

1

I think that if you can do it, try to use flex-box instead of a fixed grid.

Here's your CodePen for an example: http://codepen.io/anon/pen/RaNYLG

HTML:

<div class="row">
  <div class="column">
    <p> Here you have some content.</p> 
  </div>
  <div class="column">
    <p> Here you can have a lot of text as well, but i will make longer since you need to understand how to vertically align your content. In this case you will see that the content being aliged will be the other. Take this just as an example.</p>
  </div>
</div>

And CSS:

.row{
  display:flex;
}

.column{
  display:flex;
  width:50%;
  align-items:center;
}

(And to learn how to properly use the flex property: http://flexboxfroggy.com/)

edited Mar 01 '16 at 15:26

answered Mar 01 '16 at 15:05

Marco-dev

202
2
11

hmm okay, I will try It If there is no other solution. Good that the project is at its beginning. – anguish Mar 01 '16 at 15:15
The problem is that flexbox is not compatible with "old" Browsers?! With old I mean e.g. < IE 11. – anguish Mar 01 '16 at 15:22
1

@anguish You can check browser compatibility with features on the site http://www.caniuse.com IE10 supports Flexbox to some extent as well – TylerH Mar 01 '16 at 15:27
Yes that's why i told you "if you can do that", you can use flexbox if you don't need broswer compatibility for the old ones (for example if you should publish your web applications in China where IE 6 is still used). – Marco-dev Mar 01 '16 at 15:28
It worked for me, thank you. I will mark it as suitable answer. – anguish Mar 04 '16 at 07:22

CSS / Bootstrap: Text align vertically center

1 Answers1