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>
4 个解决方案
#1
26
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>
#2
13
-
The Owl Carousel creates additional blocks within your layout. To add CSS properties correctly, you need to work with this HTML structure:
猫头鹰旋转木马在您的布局中创建了额外的块。要正确添加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>
-
Moreover the carousel adds a
style
attribute to all blocks. For example, a block with the.owl-wrapper
class receives thedisplay
property with the value ofblock
. So you have to use an!important
declaration in your CSS.此外,轮播将样式属性添加到所有块。例如,具有.owl-wrapper类的块接收具有block值的display属性。所以你必须在CSS中使用!important声明。
-
To obtain a horizontal alignment, you can simply add
text-align: center;
property to each.owl-item > div
.要获得水平对齐,您只需添加text-align:center;每个.owl-item> div的属性。
-
To align vertically, you can turn the carousel items in table cells. But do not forget to cancel the
float
property for them.要垂直对齐,您可以在表格单元格中转动轮播项目。但是别忘了为它们取消float属性。
Let us arrange all of the changes as a new .owl-centered
class. Please check the result:
让我们安排所有的变化作为一个新的.owl为中心的类。请检查结果:
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>
#3
4
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,但想法是您对父级进行文本对齐,并且浮动:无并显示:内联阻止在移动设备上保存内容的子项:
#4
1
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
显示表的解决方案没问题,但对我来说,右侧和左侧的div从容器中滑出。我的代码差不多,我将表和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):
结果(所有图像都有不同的大小):
#1
26
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>
#2
13
-
The Owl Carousel creates additional blocks within your layout. To add CSS properties correctly, you need to work with this HTML structure:
猫头鹰旋转木马在您的布局中创建了额外的块。要正确添加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>
-
Moreover the carousel adds a
style
attribute to all blocks. For example, a block with the.owl-wrapper
class receives thedisplay
property with the value ofblock
. So you have to use an!important
declaration in your CSS.此外,轮播将样式属性添加到所有块。例如,具有.owl-wrapper类的块接收具有block值的display属性。所以你必须在CSS中使用!important声明。
-
To obtain a horizontal alignment, you can simply add
text-align: center;
property to each.owl-item > div
.要获得水平对齐,您只需添加text-align:center;每个.owl-item> div的属性。
-
To align vertically, you can turn the carousel items in table cells. But do not forget to cancel the
float
property for them.要垂直对齐,您可以在表格单元格中转动轮播项目。但是别忘了为它们取消float属性。
Let us arrange all of the changes as a new .owl-centered
class. Please check the result:
让我们安排所有的变化作为一个新的.owl为中心的类。请检查结果:
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>
#3
4
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,但想法是您对父级进行文本对齐,并且浮动:无并显示:内联阻止在移动设备上保存内容的子项:
#4
1
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
显示表的解决方案没问题,但对我来说,右侧和左侧的div从容器中滑出。我的代码差不多,我将表和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):
结果(所有图像都有不同的大小):