Vertically center carousel items in responsive

Question

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.

score 1 · Accepted Answer · answered Sep 01 '16 at 18:39

1

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 :)

answered Sep 01 '16 at 18:39

Jyoti Pathania

4,944
1
17
29

That's the height for desktop, but still worked great for responsive equaling the heights. Thanks! – Julián Bonilla Sep 01 '16 at 19:12

Vcasso · Answer 2 · 2016-09-01T18:58:08.863

1

I played around with this and came up with this.

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

I replaced all declarations for that selector. It changes the animation style, but it does vertically align. Personally, I think that looks cool but you might not. I thought it was still worth showing to you. It might be a good start for you. I did this in the browser inspector, and that was the only change I made.

edited Sep 01 '16 at 18:58

answered Sep 01 '16 at 18:55

Vcasso

1,328
1
8
14

Though it should be noted that this is really heavy and might make the images lose quality. -- on the other hand, this is most definitely the most effective and easy fix I know of. – NoobishPro Sep 01 '16 at 18:58
Thanks for the suggestion, BabyD! – Vcasso Sep 01 '16 at 18:59
I liked it, but that animation can't be accepted at work. Anyways, thanks for helping! – Julián Bonilla Sep 01 '16 at 19:13

Vertically center carousel items in responsive

2 Answers2