垂直居中动态内容

Question

我在互联网上搜索我的问题，我总是找到相同的解决方案，但它对我不起作用..我的代码中的某些内容与 'vertically center' 的示例中的有所不同div 中的动态内容。

我有这个网页 http://staging.karlienfabre.be/pocoloco/reizen/canyoning.html

问题出在第一个黄色部分。我希望左边的文字垂直居中；但文本可以有不同的长度；右边的白框也应该垂直居中。

此刻 html 看起来像这样

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

我认为css很重要

.row.center-vertical{
    display: table;
}
.vertical-center-element{
    display: table-cell;
    vertical-align: middle;
}

我找不到我做错了什么或者是什么导致居中不起作用。

提前致谢！

Answer 1

改变

.vertical-center-element{
    display: table-cell;
    vertical-align: middle;
}

至

.vertical-center-element {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

元素上有 float: left 阻止它垂直对齐。上面的代码（特别是float:none）覆盖了它。

希望对您有所帮助

编辑

对于你的情况，为什么不改变：

<div class="col-md-7 vertical-center-element">
        <h2>Actie en avontuur</h2>

到（注意 col-md-8，不是 col-md-7）

<div class="col-md-8 vertical-center-element vertical-centered-text">
        <h2>Actie en avontuur</h2>

并将以下内容应用于您的 CSS：

.vertical-center-element {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

.vertical-centered-text {
    padding-right: 60px;
}

这样您的所有元素都会正确排列，并且您的文本位于正确的位置。并且您对css所做的更改较少，因此在缩小时不会对bootstrap网格进行意外更改等

垂直居中动态内容

center dynamic content vertically

html

css

vertical-alignment

centering