How to center text vertically in a Bootstrap row

Question

The desired display is to have the text in the left column vertically centered (middle). I have not been able to achieve that. This is because the picture in the right column is taller than the 2 paragraphs of text. Interestingly, the orange div is only as high as the paragraphs.

The inline styles are only there for debug. The design being used is responsive so I'm assuming setting a height in px will make it non-responsive.

Edit: The inline debug styles were misleading so have been removed

<div class="row">
  <div class="col-md-8">
    <div class="vertical-align-center">
      <p>First small paragraph with other elements in it</p>
      <p>Second small paragraph with other elements in it</p>
    </div>
  </div>

  <div class="col-md-4">
    <img class="img-responsive img-md-size" src="blog.localhost/klequis/wp-content/uploads/2016/0521/DevBoxRunning.png">
  </div>
</div>

Please see [vertically center content of a floating div](http://stackoverflow.com/questions/12168145/vertically-center-content-of-floating-div) — Jhecht, May 22 '16 at 22:10
try offsetting columns ..something like this "adjust if needed :

.col-md-6 .col-md-offset-3 — z atef, May 22 '16 at 22:11
Here you can see it: http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3 — Jakob, May 22 '16 at 22:19
I'm working on a JSFiddle for this but it is my first time using it and have not figured it all out yet https://jsfiddle.net/klequis/dr35rhwc/ — klequis, May 23 '16 at 13:45

Craig Brown · Answer 1 · 2021-08-05T11:40:11.473

14

In Bootstrap 4 and above, you can add the align-self-center class to the column div to vertically center it.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-8 align-self-center">
    <p>First small paragraph with other elements in it</p>
    <p>Second small paragraph with other elements in it</p>
  </div>

  <div class="col-4">
    <img src="//lorempixel.com/150/300/" class="img-responsive" />
  </div>
</div>

edited Aug 05 '21 at 11:40

answered Mar 05 '18 at 00:33

Craig Brown

1,891
1
24
25

1

`align-self-center` worked for me in the `col` class. – Benjamin Castor Mar 20 '18 at 21:47

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

Edited Answer

If you want for the two things to be the same height, you're running into a problem that has existed since float became a thing. This Stackoverflow Question is from 2009 and it's about the same thing. You can choose to use the method described in that post, which basically equates to setting the bottom margin to some crazy huge number in order to pull the bottom edge down but that gets hidden with a overflow div, like so. Unfortunately, this doesn't net you a vertical center on the text since the thing that's actually stretching all that height is the margin/padding of the box, not the inner height.

.vertical-align-center {
  display: table;
  height: 100%;
  width: 100%;
}
.vertical-align-center .valign-center {
  display: table-cell;
  vertical-align: middle;
  height: 100%;
}
.vertical-align-center > div {
  padding-bottom: 200em;
  margin-bottom: -200em;
}
.overflow-hidden {
  overflow: hidden;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div style="background-color:blue;" class="row overflow-hidden">
  <div style="background-color:orange; height:1000px;" class="col-xs-8 vertical-align-center">
    <div style="background-color: green;" class="valign-center">
      <p>First small paragraph with other elements in it</p>
      <p>Second small paragraph with other elements in it</p>
    </div>
  </div>

  <div class="col-xs-4">
    text
  </div>
</div>

Alternate

Now the next part is for display:flex, something more uncommon, and it isn't fully supported by all mainstream browsers yet. According to Can I Use a good chunk of browsers can use it, but for things like IE it's going to be buggy.

NOTE: This is going to override bootstrap's display:float and it may not be exactly what you would like to see. I will leave it to you to figure out the spacing. CSS Tricks has a really nice side-by-side for the flex-container and the flex-items.

.row.flex-override {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  justify-content: space-around;
}
.row.flex-override > .vertical-align-center {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
}
.row.flex-override .vertical-align-center .valign-center {
  align-self: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row flex-override">
  <div class="col-xs-8 vertical-align-center" style="background-color: green;">
    <div class="valign-center">
      <p>First small paragraph with other elements in it</p>
      <p>Second small paragraph with other elements in it</p>
    </div>
  </div>

  <div class="col-xs-4" style="background-color:orange;">
    <img src="//lorempixel.com/500/500/cats/1" class="img-responsive" />
  </div>
</div>

Original Answer

You had a few random little errors in your code, the biggest of which was you put height=100% in the inline style. It should read height:100%

Note: you don't really need the valign-center class, but it makes it a little bit more readable in my opinion.

Happy Coding.

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div style="background-color:blue;" class="row">
  <div style="background-color:orange; height:1000px;" class="col-xs-8 vertical-align-center">
    <div style="background-color: green;" class="valign-center">
      <p>First small paragraph with other elements in it</p>
      <p>Second small paragraph with other elements in it</p>
    </div>
  </div>

  <div class="col-xs-4">
    text
  </div>
</div>

I'll have to apologize for not cleaning-up my debug code properly. height:1000px is something I threw in to see what would happen. Unfortunately, when taken out your answer no longer works. So you are right given what I asked. I have cleaned-up the example. — klequis, May 23 '16 at 13:37

How to center text vertically in a Bootstrap row

2 Answers2

Edited Answer

Alternate

Original Answer