垂直中心旋转木马物品在响应

我有一个旋转木马物品的变量高度在响应，我想他们垂直居中.carousel内容器。而且我确实（使用flex，top &变形等）......但是它们只在动画完成时完成动画才会居中，所以它们首先对齐顶部，然后向下并看起来像跳跃。垂直中心旋转木马物品在响应

我认为这是关于旋转木马的Bootstrap动画的东西，但我还没弄明白。该页面为https://zuckermanlaw.swapps.io，传送带位于我们的服务部分。我会很感激任何帮助。谢谢。

来源

2016-09-01 Julián Bonilla

只需添加与您的旋转木马内部类的高度相同的高度即可，但它可以稍微拉伸图像，但可以解决您的问题。

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

我希望这可以帮助你。享受:)

来源

2016-09-01 18:39:27

这就是桌面的高度，但仍然非常适合响应高度。谢谢！ –

我玩过这个，想出了这个。

@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 
    }

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

来源

2016-09-01 18:55:29 Vcasso

虽然应该指出，这是非常沉重的，可能会使图像质量下降。另一方面，这绝对是我所知道的最有效最简单的解决方案。 – NoobishPro

感谢您的建议，BabyD！ – Vcasso

我喜欢它，但该动画无法在工作中接受。无论如何，感谢您的帮助！ –

垂直中心旋转木马物品在响应

回答

相关问题