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

我想要做的是垂直text-center对齐carousel-items. 我试过使用flexbox但无法让它工作！

先感谢您！

标签： htmlcsstwitter-bootstrapvertical-alignment

Answer 1

这应该可以解决问题

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