30

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>

6 Answers 6

56

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>

2
  • For some reason the solutions here weren't jiving with my layout, but I ended up getting it to work ok by setting a percentage value on the left margin of my divs that were turned to the item divs. But nice approach and thanks! This will likely work for me in the future. Jan 15, 2018 at 17:59
  • 1
    I'm using Gantry 5 Helium on Grav and adding display: flex to .owl-carousel .owl-stage makes a line of the next image show on the right side of the current image, however, it's the only solution I've found that actually vertically centres all the images. Any ideas on how to get rid of the line? If anyone's willing to help I'll send you the URL.
    – Tugzrida
    Mar 4, 2018 at 1:03
23
  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.

screenshot

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>

5

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:

1
  • Thanks for the answer! But what about vertical centering? And the solution for a wide screen is of interest.... Aug 28, 2017 at 16:30
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): enter image description here

3

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;
}
3

I advise this solution:

.owl-carousel .owl-stage {
    margin: 0 auto; 
}
1
  • Thanks for the answer, but what about vertical centering? May 22, 2021 at 17:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.