bootstrap3, jquery 尝试使垂直对齐

Question

我尝试为引导 col-md* 列进行垂直对齐。我有两个带有文本和图像的块。我需要块的高度相等，并且带有一些文本的块将具有中心垂直对齐。我在下面的解决方案，但它不能正常工作。请帮帮我）

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);
});

Answer 1

您可以使用 Flexbox 来做到这一点

Fiddle

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