Html 如何使猫头鹰轮播中的图像居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39164738/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center the images in the Owl Carousel
提问by Gleb Kemarsky
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="//placehold.it/120x120/69c/fff/" alt=""></div>
<div><img src="//placehold.it/200x200/c69/fff/" alt=""></div>
<div><img src="//placehold.it/160x160/9c6/fff/" alt=""></div>
<div><img src="//placehold.it/240x240/fc6/fff/" alt=""></div>
<div><img src="//placehold.it/160x160/9c6/fff/" alt=""></div>
<div><img src="//placehold.it/200x200/c69/fff/" alt=""></div>
<div><img src="//placehold.it/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>采纳答案by Gleb Kemarsky
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>Moreover the carousel adds a
styleattribute to all blocks. For example, a block with the.owl-wrapperclass receives thedisplayproperty with the value ofblock. So you have to use an!importantdeclaration in your CSS.To obtain a horizontal alignment, you can simply add
text-align: center;property to each.owl-item > div.To align vertically, you can turn the carousel items in table cells. But do not forget to cancel the
floatproperty for them.
Owl Carousel 在您的布局中创建额外的块。要正确添加 CSS 属性，您需要使用以下 HTML 结构：
<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>此外，轮播
style为所有块添加了一个属性。例如，具有.owl-wrapper该类的块接收display值为的属性block。所以你必须!important在你的 CSS 中使用声明。要获得水平对齐，您可以简单地
text-align: center;为 each添加属性.owl-item > div。要垂直对齐，您可以转动表格单元格中的轮播项目。但不要忘记
float为他们取消财产。
Let us arrange all of the changes as a new .owl-centeredclass. Please check the result:
让我们将所有更改安排为一个新.owl-centered班级。请检查结果：
https://codepen.io/glebkema/pen/BzgZxX
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="//placehold.it/120x120/69c/fff/" alt=""></div>
<div><img src="//placehold.it/200x200/c69/fff/" alt=""></div>
<div><img src="//placehold.it/160x160/9c6/fff/" alt=""></div>
<div><img src="//placehold.it/240x240/fc6/fff/" alt=""></div>
<div><img src="//placehold.it/160x160/9c6/fff/" alt=""></div>
<div><img src="//placehold.it/200x200/c69/fff/" alt=""></div>
<div><img src="//placehold.it/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>回答by xavier bs
With owl carousel version 2.1.1 and CSS3 Flexbox, just add the style:
使用 owl carousel 版本 2.1.1 和 CSS3 Flexbox，只需添加样式：
.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="http://lorempicsum.com/up/350/200/1">
<div class="caption">Caption 1</div>
</div>
<div class="item">
<img src="http://lorempicsum.com/up/255/200/2">
<div class="caption">Caption 2</div>
</div>
<div class="item">
<img src="http://lorempicsum.com/up/627/200/3">
<div class="caption">Caption 3</div>
</div>
<div class="item">
<img src="http://lorempicsum.com/up/627/300/4">
<div class="caption">Caption 4</div>
</div>
<div class="item">
<img src="http://lorempicsum.com/up/627/400/5">
<div class="caption">Caption 5</div>
</div>
<div class="item">
<img src="http://lorempicsum.com/up/255/200/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>回答by Lucas Bustamante
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:
不过，您可以将其调整为您的 HTML，但这个想法是您在移动设备上对父项进行文本对齐，并浮动：无并显示：内联阻止包含内容的子项：
回答by Imre
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 tableand table-cellto blockand inline-block
带显示表的解决方案还可以，但对我来说，左右两侧的div从容器中滑出。我的代码几乎相同，我将table和更改table-cell为block和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):
结果（所有图像都有不同的大小）：
回答by dipser
Another solution is to use flexbox with margin.
另一种解决方案是使用带有边距的 flexbox。
.owl-stage-outer {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
}
.owl-stage-outer > .owl-stage {
margin:0 auto;
}
