如何将 Owl Carousel 中的图像居中

Posted 2023-02-16

【中文标题】如何将 Owl Carousel 中的图像居中

【英文标题】：How to center the images in the Owl Carousel

【发布时间】：2017-01-03 00:49:32

【问题描述】：

My Owl Carousel 包含不同宽度和高度的图片。如何将它们在中间对齐 - 水平和垂直？

$("#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/" ></div>
  <div><img src="https://via.placeholder.com/200x200/c69/fff/" ></div>
  <div><img src="https://via.placeholder.com/160x160/9c6/fff/" ></div>
  <div><img src="https://via.placeholder.com/240x240/fc6/fff/" ></div>
  <div><img src="https://via.placeholder.com/160x160/9c6/fff/" ></div>
  <div><img src="https://via.placeholder.com/200x200/c69/fff/" ></div>
  <div><img src="https://via.placeholder.com/120x120/69c/fff/" ></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>

【参考方案1】：

使用owl carousel 2.1.1版本和CSS3 Flexbox，只需添加样式：

.owl-carousel .owl-stage 
  display: flex;
  align-items: center;

查看sn-p：

$( 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>

【讨论】：

由于某种原因，这里的解决方案与我的布局不相符，但我最终通过在我的 div 的左边距上设置一个百分比值来使其正常工作，这些值被转换为项目 div .但是很好的方法，谢谢！这可能会在未来对我有用。

我在 Grav 上使用 Gantry 5 Helium 并将 display: flex 添加到 .owl-carousel .owl-stage 使下一个图像的一行显示在当前图像的右侧，但是，这是我唯一的解决方案'已经发现实际上垂直居中所有图像。关于如何摆脱这条线的任何想法？如果有人愿意帮忙，我会把网址发给你。

【参考方案2】：

猫头鹰旋转木马会在您的布局中创建额外的块。要正确添加 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="" >
        </div>
      </div>
      <div class="owl-item">
        <div>
          <img src="" >
        </div>
      </div>
    </div>
  </div>
</div>

此外，轮播为所有块添加了style 属性。例如，具有.owl-wrapper 类的块接收值为block 的display 属性。所以你必须在你的 CSS 中使用!important 声明。

要获得水平对齐，您只需将text-align: center; 属性添加到每个.owl-item > div。

要垂直对齐，您可以在表格单元格中转动轮播项目。但不要忘记为他们取消float 属性。

让我们将所有更改安排为一个新的.owl-centered 类。请检查结果：

猫头鹰旋转木马 2.3.4：https://codepen.io/glebkema/pen/vYKMgzj 猫头鹰旋转木马 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/" ></div>
  <div><img src="https://via.placeholder.com/200x200/c69/fff/" ></div>
  <div><img src="https://via.placeholder.com/160x160/9c6/fff/" ></div>
  <div><img src="https://via.placeholder.com/240x240/fc6/fff/" ></div>
  <div><img src="https://via.placeholder.com/160x160/9c6/fff/" ></div>
  <div><img src="https://via.placeholder.com/200x200/c69/fff/" ></div>
  <div><img src="https://via.placeholder.com/120x120/69c/fff/" ></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】：

这对我有用：

@media (max-width:500px) 
    .owl-carousel .owl-item 
        text-align:center;
    
    .owl-carousel .item 
        float: none;
        display: inline-block;
    

尽管您可以将其调整为您的 HTML，但其想法是您在移动设备上对父级进行文本对齐，并使用 float:none 和 display:inline-block 保存内容的子级：

【讨论】：

感谢您的回答！但是垂直居中呢？宽屏的解决方案很有趣....

【参考方案4】：

显示表格的解决方案是可以的，但是对我来说左右两侧的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;

结果（所有图像都有不同的尺寸）：

【参考方案5】：

另一种解决方案是使用带边距的 flexbox。

.owl-stage-outer 
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;

.owl-stage-outer > .owl-stage 
  margin:0 auto;

【参考方案6】：

我建议这个解决方案：

.owl-carousel .owl-stage 
    margin: 0 auto; 

【讨论】：

感谢您的回答，但是垂直居中呢？