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?

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

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">

<div id="owl-example" class="owl-carousel">
  <div><img src="https://via.placeholder.com/120x120/69c/fff/" alt=""></div>
  <div><img src="https://via.placeholder.com/200x200/c69/fff/" alt=""></div>
  <div><img src="https://via.placeholder.com/160x160/9c6/fff/" alt=""></div>
  <div><img src="https://via.placeholder.com/240x240/fc6/fff/" alt=""></div>
  <div><img src="https://via.placeholder.com/160x160/9c6/fff/" alt=""></div>
  <div><img src="https://via.placeholder.com/200x200/c69/fff/" alt=""></div>
  <div><img src="https://via.placeholder.com/120x120/69c/fff/" alt=""></div>
</div>

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>

Solution 1

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

   <div id="owl-demo" class="owl-carousel owl-theme">
     <div class="owl-wrapper-outer">
       <div class="owl-wrapper">
         <div class="owl-item">
           <div>
             <img src="" alt="">
           </div>
         </div>
         <div class="owl-item">
           <div>
             <img src="" alt="">
           </div>
         </div>
       </div>
     </div>
   </div>
   

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:

Owl Carousel 2.3.4: https://codepen.io/glebkema/pen/vYKMgzj
Owl Carousel 1.3.3: 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;
}

<div id="owl-example" class="owl-carousel owl-centered">
  <div><img src="https://via.placeholder.com/120x120/69c/fff/" alt=""></div>
  <div><img src="https://via.placeholder.com/200x200/c69/fff/" alt=""></div>
  <div><img src="https://via.placeholder.com/160x160/9c6/fff/" alt=""></div>
  <div><img src="https://via.placeholder.com/240x240/fc6/fff/" alt=""></div>
  <div><img src="https://via.placeholder.com/160x160/9c6/fff/" alt=""></div>
  <div><img src="https://via.placeholder.com/200x200/c69/fff/" alt=""></div>
  <div><img src="https://via.placeholder.com/120x120/69c/fff/" alt=""></div>
</div>

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>

Solution 2

With owl carousel version 2.1.1 and CSS3 Flexbox, just add the style:

.owl-carousel .owl-stage {
  display: flex;
  align-items: center;
}

See the snippet:

$( document ).ready( function() {
  $( '.owl-carousel' ).owlCarousel({
     autoplay: true,
     margin: 2,
     loop: true,
     responsive: {
        0: {
           items:1
        },
        200: {
           items:3
        },
        500: {
           items:4
        }
     }
  });
});

.owl-carousel .owl-stage {
  display: flex;
  align-items: center;
}

.owl-carousel .caption {
  text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>

<div class="owl-carousel">
    <div class="item">
      <img src="https://via.placeholder.com/350x200/?text=1">
      <div class="caption">Caption 1</div>
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/255x200/?text=2">
      <div class="caption">Caption 2</div>
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/627x200/?text=3">
      <div class="caption">Caption 3</div>
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/627x300/?text=4">
      <div class="caption">Caption 4</div>
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/627x400/?text=5">
      <div class="caption">Caption 5</div>
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/255x200/?text=6">
      <div class="caption">Caption 6</div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>

Solution 3

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:

Solution 4

The solution with display table is OK, but for me the divs on the right and left side slides out from the container. My code is close the same, I changed the table and table-cell to block and inline-block

.owl-stage{
  display: block !important;
}

.owl-item{
  display: inline-block;
  float: none;
  vertical-align: middle;
}

.item{
  text-align: center;
}

The result (all images has different sizes):

Solution 5

Another solution is to use flexbox with margin.

.owl-stage-outer {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
}
.owl-stage-outer > .owl-stage {
  margin:0 auto;
}

View more solutions