Owl Carousel - Using padding-ratio trick - Align image in center

Question

So I'm wondering how I can solve the following;

On desktop and tablet I use images with a ratio of 16:9 (or 1280x720). On mobile though I would like to show these images within a fixed ratio of 1:1. This is done by using the famous padding-trick.

One thing though, the pictures within the owl-carousel are aligned to the left, I need these images to be centered within the container.

HTML

<div class="owl-carousel owl-centered owl-theme owl-loaded owl-drag">
    <div class="owl-stage-outer">
        <div class="owl-stage" style="transition: all 0s ease 0s; width: 2520px; transform: translate3d(-720px, 0px, 0px);">
            <div class="owl-item cloned" style="width: 360px;">
                <img src="" class="item"/>
            </div>
            <div class="owl-item cloned" style="width: 360px;">
                <img src="" class="item"/>
            </div>
            <div class="owl-item active center" style="width: 360px;">
                <img src="" class="item"/>
            </div>
            <div class="owl-item" style="width: 360px;">
                <img src="" class="item"/>
            </div>
            <div class="owl-item" style="width: 360px;">
                <img src="" class="item"/>
            </div>
            <div class="owl-item cloned" style="width: 360px;">
                <img src="" class="item"/>
            </div>
            <div class="owl-item cloned" style="width: 360px;">
                <img src="" class="item"/>
            </div>
        </div>
    </div>
</div>

CSS

.owl-carousel.owl-centered .owl-stage-outer {
    position: relative;
    padding-top: 100%;
    width: 100%;
}

.owl-carousel.owl-centered .owl-stage {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

.owl-carousel.owl-centered .owl-item,
.owl-carousel.owl-centered .owl-item > img {
    height: 100%;
    width: auto;
    text-align: center;
    overflow: hidden;
}

I've read multiple topics here on so, as you can see I've tried using the "text-align" and translateX features but I just can't seem to solve this. It should be possible right?

I've also tried autoWidth and autoHeight which comes with Owl Carousel...

Last resort would be to generate multiple image sizes in the correct ratio.

Answer 1

Alright, so I thought I was stuck but then realized I can use display flex and z-index to prevent the other images overlapping. The css looks like this;

CSS

.owl-carousel.owl-centered .owl-stage-outer {
    position: relative;
    padding-top: 100%;
    width: 100%;
}

.owl-carousel.owl-centered .owl-stage {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

.owl-carousel.owl-centered .owl-item {
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 100%;
    width: auto;
}

.owl-carousel.owl-centered .owl-item.active {
    z-index: 999; <-- There it is
}

.owl-carousel.owl-centered .owl-item > img {
    height: 100%;
    width: auto;
}

Hope this can help somebody else!