Есть карусель с изображениями различного размера. Как их отцентрировать внутри карусели? У меня не получается...
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;
}
Ответ
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;
}
