center dynamic content vertically

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">
                        <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 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!

Andy Mardell · Accepted Answer · 2015-01-03T23:05:48.710

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.

Ok. As you said the content is now vertically aligned, but the div need to be floated: left.. any idea how the achieve both? — user3346696, Jan 03 '15 at 22:37
Perhaps this will help: http://stackoverflow.com/questions/12557897/how-to-vertically-middle-align-floating-elements-of-unknown-heights . If not you could adjust the top margin using jquery or something? — Andy Mardell, Jan 03 '15 at 22:42

center dynamic content vertically

1 Answers1