bootstrap3，jQuery嘗試使垂直對齊

Question

我嘗試使bootstrap 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做到這一點

小提琴

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