Despite my extensive search on the internet, I have not been able to resolve my issue. The typical solution for vertically centering dynamic content in a div does not seem to work for me. It appears that something in my code is different from the examples provided.
You can find the webpage in question here:
The problem lies within the first yellow section of the page. I am trying to achieve vertical center alignment for both the text on the left (which may vary in length) and the white box on the right.
Currently, the HTML structure looks 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">
<a href=""> <img class="img-circle img-responsive" src="../img/reisaanbod/testimonials/testi_canyoning.jpg" alt=""> </a>
</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 important CSS styles are as follows:
.row.center-vertical{
display: table;
}
.vertical-center-element{
display: table-cell;
vertical-align: middle;
}
I am unable to pinpoint the error causing the centering issue. Any assistance would be greatly appreciated!
Thank you in advance!