Как отцентрировать изображения Owl Carousel?

#javascript #html #jquery #slider #карусель

Есть карусель с изображениями различного размера. Как их отцентрировать внутри карусели?
У меня не получается... 

UPD. Отцентрировать и по вертикали, и по горизонтали.

http://jsfiddle.net/8bJUc/524/



$(document).ready(function() {
  $("#owl-demo").owlCarousel({
    navigation: true,
    pagination: true,
    lazyLoad: true
  });
});
@import url('//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css');
@import url('//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.css');

#owl-demo .owl-item > div {
  padding: 0px 2px;
  display: table;
}
#owl-demo .owl-item > div img {
  display: block;
  width: 100%;
  display: table-cell;
  vertical-align: middle;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin-bottom: 4px;
}

  

    
  
  

    
  
  

    
  
  

    
  
  

    
  
  

    
  
  

    
  







    

Ответы

Ответ 1

Owl Carousel создаёт дополнительные блоки внутри вашей вёрстки. Поэтому, чтобы правильно
добавить CSS
свойства, надо работать вот с такой структурой:


  

    

      

        

          
        
      
      

        

          
        
      
    
  



То есть, таблицей делаем .owl-wrapper, а ячейками — .owl-item.
И на все элементы карусель навешивает атрибут style. Например, у блока с классом
.owl-wrapper там прописывается display: block;. Поэтому в своих стилях приходится добавить
!important.
Чтобы сработало вертикальное центрирование по ячейкам таблицы, нужно перебить им
свойство float.
Ну а для горизонтального центрирования достаточно text-align: center;.


Приятно, что в этом решении высота карусели не скачет, когда самая высокая картинка
уезжает за пределы экрана. Проверьте результат:

http://jsfiddle.net/glebkema/yqfwzkL0/



$(document).ready(function() {
  $("#owl-demo").owlCarousel({
    navigation: true,
    pagination: true,
    lazyLoad: true
  });
});
@import url('//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css');
@import url('//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.css');

#owl-demo .owl-wrapper {
  display: table !important;
  margin-bottom: 4px;
  padding: 0px 2px;
}
#owl-demo .owl-item {
  display: table-cell;
  float: none;
  vertical-align: middle;
}
#owl-demo .owl-item > div {
  text-align: center;
}
#owl-demo .owl-item img {
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}

  

    
  
  

    
  
  

    
  
  

    
  
  

    
  
  

    
  
  

    
  






Ответ 2

http://owlgraphic.com/owlcarousel/demos/autoHeight.html
Попробуй так 

свои стили что сейчас можешь убрать а использовать только 

#owl-demo .owl-item img{
   display: block;
   width: auto;
   margin: 0 auto;
}