Julián Bonilla Julián Bonilla - 1 year ago 82
CSS Question

Vertically center carousel items in responsive

I have a carousel with items that have variable height in responsive, and I want to center them vertically in the .carousel-inner container. And I do (using flex, top & transform, etc)... but they're centered only when they have finished the animation when becoming active, so they are aligned top at first, then go down and it seems like it jumps.

I think it's something about the Bootstrap animations for the carousel but I haven't figure it out. The page is https://zuckermanlaw.swapps.io, the carousel is in the Our Services section. I'd appreciate any help. Thanks.

Answer Source

Just add the height same as your carousel-inner class has to below mention class, though it stretch images a little bit but fix your issue.

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

I hope this helps you. Enjoy :)