center dynamic content vertically - html

Question

I've search through the internet for my issue and I always find the same solution, but it doesn't work out for me.. something in my code is different then in the examples of 'vertically center' dynamic content in a div.
I've this webpage
http://staging.karlienfabre.be/pocoloco/reizen/canyoning.html
And the issue is at the first yellow section. I would like that the text on the left is centered vertically; but the text can have different lengths; the white box on the right should also be centered vertically.
At this moment the html is looking like this
<div class="container yellow-content">
<div class="row center-vertical">
<div class="col-md-7 vertical-center-element">
<h2>Actie en avontuur</h2>
<p>
540 smith grind grind hang up launch ramp. Sponsored gnarly no comply regular footed hang-up. Quarter pipe tic-tac aerial hang ten airwalk. Deck baseplate crail grab bluntslide regular footed. Varial carve darkslide ollie hole Vans Calfornia Daze rocket air. Pivot kick-nose ollie sketchy death box Steve Rocco.
</p>
</div>
<div class="col-md-3 col-md-offset-1 bgwhite vertical-center-element">
<div class="row text-center">
<div class="col-md-6 col-md-offset-3">
<div class="text-center testimonial">
<img class="img-circle img-responsive" src="../img/reisaanbod/testimonials/testi_canyoning.jpg" alt="">
</div>
</div>
</div>
<div class="row text-center">
<div class="row-md-9">
<p>Tic-tac nollie bearings Ron Allen disaster. Downhill blunt no comply Kevin Jarvis slob air. Deck Brooklyn Banks indy grab slap maxwell pop shove-it.</p>
</div>
</div>
</div>
</div>
</div>
the css I think is important
.row.center-vertical{
display: table;
}
.vertical-center-element{
display: table-cell;
vertical-align: middle;
}
I can't find what I'm doing wrong or what makes that the centering is not working.
Thanks in advance!

Answer 1

Change
.vertical-center-element{
display: table-cell;
vertical-align: middle;
}
to
.vertical-center-element {
display: inline-block;
vertical-align: middle;
float: none;
}
You have float: left on the element which is preventing it from vertically aligning. The above code (specifically float:none) overrides it.
Hope that helps
EDIT
In your case, why not change:
<div class="col-md-7 vertical-center-element">
<h2>Actie en avontuur</h2>
to (NOTE col-md-8, not col-md-7)
<div class="col-md-8 vertical-center-element vertical-centered-text">
<h2>Actie en avontuur</h2>
and apply the following to your CSS:
.vertical-center-element {
display: inline-block;
vertical-align: middle;
float: none;
}
.vertical-centered-text {
padding-right: 60px;
}
That way all your elements line up properly and your text is in the correct position. And you have made less changes to the css so you won't get unexpected changes to the bootstrap grid when scaled down etc.