html - 在 Bootstrap 轮播中垂直居中 div

Question

我有以下结构:

<div class="carousel" id="my-carousel">
  <div class="carousel-item">
    <div class="text-center">
      ...
    </div>
  </div>
  <div class="carousel-item">
    <div class="text-center">
      ...
    </div>
  </div>
  <div class="carousel-item">
    <div class="text-center">
      ...
    </div>
  </div>
</div>

我还有以下用于规范轮播的脚本:

function normalizeCarousel() {
  function normalize() {
    var maxHeight = 0;
    $(".carousel-item").each(function() {
      var currentHeight = $(this).height();
      if (currentHeight > maxHeight) {
        maxHeight = currentHeight;
      }
    });
    $("#my-carousel").css("height", maxHeight);
  };

  normalize();
  $(window).on("resize orientationchange", function() {
    normalize();
  });
}

$(document).ready(function() {
  normalizeCarousel();
});

这是 JSFiddle:JSFiddle

我要做的是垂直对齐 carousel-items 内的每个 text-center div。我试过使用 flexbox 但没能成功!

提前致谢!

Answer 1

这应该可以解决问题

.carousel-item {
  display: table;
}
.text-center {
  display: table-cell;
  vertical-align:middle;
}