Question

我有一个旋转木马，其物品的高度可变响应，我想将它们垂直居中于.carousel-inner容器中。我这样做（使用flex，top＆amp; transform等）......但是当它们在变为活动时完成动画时它们才会居中，所以它们首先对齐，然后向下看，它似乎跳了起来

我认为它是关于旋转木马的Bootstrap动画的东西，但我还没弄清楚。页面为https://zuckermanlaw.swapps.io，轮播位于“我们的服务”部分。我很感激任何帮助。感谢。

Answer 1

只需添加与您的carousel-inner类相同的高度到下面提到的类，尽管它可以稍微拉伸图像但是可以解决您的问题。

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 
    }

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

垂直居中的旋转木马项目响应迅速

2 个答案: