如何将图像置于猫头鹰旋转木马中心

Question

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

MontiArc

public voidshowcase() {
    new MaterialShowcaseView.Builder(this)
        .setTarget(accident)

        .setDismissText("GOT IT")
        .setDismissTextColor(Color.parseColor("#404040"))
        .setShapePadding(140)
        .setContentText("Touch the yellow fab below to see more services")
        .setDelay(withDelay) 
// optional but starting animations immediately in onCreate can make them choppy
       .singleUse(SHOWCASE_ID) // provide a unique ID used to ensure it is only shown once
        .show();
}

Answer 1

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

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

请参阅代码段：

＆＃13;

＆＃13;

$( document ).ready( function() {
  $( '.owl-carousel' ).owlCarousel({
     autoplay: true,
     margin: 2,
     loop: true,
     responsive: {
        0: {
           items:1
        },
        200: {
           items:3
        },
        500: {
           items:4
        }
     }
  });
});

＆＃13;

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

.owl-carousel .caption {
  text-align: center;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

1. Owl Carousel会在您的布局中创建其他块。要正确添加CSS属性，您需要使用此HTML结构：

   $("#owl-example").owlCarousel({
     navigation: true
   });

2. 此外，轮播为所有块添加<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>属性。例如，具有<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。因此，您必须在CSS中使用display声明。

3. 要获得水平对齐，您只需向每个block添加!important属性。

4. 要垂直对齐，您可以在表格单元格中转动轮播项目。但是别忘了为他们取消text-align: center;属性。



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

https://codepen.io/glebkema/pen/BzgZxX

float

.owl-centered

$("#owl-example").owlCarousel({
  navigation: true
});

Answer 3

这对我有用：

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

你可以将它调整为你的HTML，但想法是你在父文本中对齐文本，并且浮动：无显示：在移动设备上内联阻止包含内容的子项：

Answer 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;
}

结果（所有图像大小不同）：

Answer 5

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

.owl-stage-outer {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
}
.owl-stage-outer > .owl-stage {
  margin:0 auto;
}

Answer 6

我建议这个解决方案：

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