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

1. The Owl Carousel creates additional blocks within your layout. To add CSS properties correctly, you need to work with this HTML structure:

2. Moreover the carousel adds a style attribute to all blocks. For example, a block with the .owl-wrapper class receives the display property with the value of block. So you have to use an !important declaration in your CSS.

3. To obtain a horizontal alignment, you can simply add text-align: center; property to each .owl-item > div.

4. To align vertically, you can turn the carousel items in table cells. But do not forget to cancel the float property for them.

Let us arrange all of the changes as a new .owl-centered class. Please check the result:

https://codepen.io/glebkema/pen/BzgZxX

$("#owl-example").owlCarousel({
  navigation: true
});

@import url('//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css');
@import url('//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css');

.owl-centered .owl-wrapper {
  display: table !important;
}
.owl-centered .owl-item {
  display: table-cell;
  float: none;
  vertical-align: middle;
}
.owl-centered .owl-item > div {
  text-align: center;
}