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

执行此操作

Fiddle

AfxMessageBox

@media(min-width: 992px) {
  .content {
    display: flex;
    align-items: center;
  }

  .box img {
    width: 100%;
  }
}