How to center the images in the Owl Carousel

Question

My Owl Carousel contains pictures of different width and height. How do I align them in the middle - both horizontally and vertically?

Answer 1

This works for me:

@media (max-width:500px) {
    .owl-carousel .owl-item {
        text-align:center;
    }
    .owl-carousel .item {
        float: none;
        display: inline-block;
    }
}

You might adjust it to your HTML though, but the idea is that you text-align a parent, and float:none and display:inline-block the child that holds the content, on mobile: