在响应式中垂直居中轮播项目

Question

我有一个旋转木马，其中的项目在 responsive 中具有可变高度，我想在 .carousel-inner 容器中将它们垂直居中。我确实这样做了（使用 flex、top 和 transform 等）...但是只有当它们在激活时完成动画时才会居中，所以它们首先在顶部对齐，然后向下对齐，看起来像是在跳跃。

我认为这与轮播的 Bootstrap 动画有关，但我还没搞清楚。该页面为 https://zuckermanlaw.swapps.io，轮播位于我们的服务部分。我将不胜感激任何帮助。谢谢

Answer 1

只需添加与您的旋转木马内部相同的高度 class 必须在下面提到 class，虽然它会稍微拉伸图像但可以解决您的问题。

section.third-section #carousel-our-services .carousel-inner .item .carousel-caption {
        display: flex;
        height: 365px;    
    }

希望对您有所帮助。享受:)

Answer 2

我玩弄了这个并想出了这个。

    @media (-webkit-transform-3d), not all
    .carousel-inner>.item.active, .carousel-inner>.item.next.left, .carousel-inner>.item.prev.right {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translate(0,-50%); // IE9
transform: translate3d(0,-50%,0); // Modern Browsers 
    }

我替换了该选择器的所有声明。它改变了动画风格，但它确实垂直对齐。就个人而言，我认为这看起来很酷，但你可能不会。我认为它仍然值得向您展示。这对你来说可能是一个好的开始。我在浏览器检查器中执行了此操作，这是我所做的唯一更改。

在响应式中垂直居中轮播项目

Vertically center carousel items in responsive

html

css

twitter-bootstrap

bootstrap-carousel

responsive