我已经通过互联网搜索我的问题而且我总能找到相同的解决方案,但它对我来说并不成功..我的代码中的某些内容与#39的示例不同;垂直中心' 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;
}
我无法找到我做错的事,或者是什么使得定心无效。
提前致谢!
答案 0 :(得分: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>
to(注意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进行了较少的更改,因此在缩小等时不会对引导网格进行意外更改。