我尝试为 bootstrap col-md* 列设置垂直对齐。我有两个带有文本和图像的 block 。我需要 block 的高度相等,并且带有一些文本的 block 将居中垂直对齐。下面是我的解决方案,但它无法正常工作。请帮帮我)
HTML
<div class="row">
<div class="col-md-6">
<div class="some-text">Some text</div>
</div>
<div class="col-md-6">
<div class="some-img"><img src="..." width="100%"></div>
</div>
</div>
CSS
.some-text {
position: absolute;
top: 50%;
transform: translate(0,-50%);
}
JS
$('.some-text').each(function() {
var newH = 0;
$(this).parent().siblings().each(function() {
if ($(this).height() > newH)
{
newH = $(this).height();
}
});
$(this).parent().css('height', newH);
});
最佳答案
你可以使用 Flexbox
@media(min-width: 992px) {
.content {
display: flex;
align-items: center;
}
.box img {
width: 100%;
}
}
<div class="row content">
<div class="col-md-6 box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque omnis quaerat assumenda. Sed nam molestiae eligendi. Ratione labore doloremque exercitationem id, reprehenderit ipsum! Totam et veritatis sapiente! Iusto, molestias debitis!</p>
</div>
<div class="col-md-6 box">
<img src="http://placehold.it/450x250">
</div>
</div>
关于jquery - bootstrap3, jquery 尝试垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34772515/