我有以下结构:
<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
但没能成功!
提前致谢!
最佳答案
这应该可以解决问题
.carousel-item {
display: table;
}
.text-center {
display: table-cell;
vertical-align:middle;
}
关于html - 在 Bootstrap 轮播中垂直居中 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53032696/