How to center text vertically in a Bootstrap row - html

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>

Answer 1

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>

Answer 2

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>