bootstrap3，jquery试图使垂直对齐

Question

我试图使引导-md*列垂直对齐。我有两个有文字和图像的街区。我需要的区块将是相等的高度和块与一些文字将有中心垂直对齐。下面是我的解决方案，但没有正确工作。请救救我)

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