Ionic - 离子滑块中的垂直对齐图像答案

【问题标题】：Ionic - vertical align image in ion-slide-boxIonic - 离子滑块中的垂直对齐图像
【发布时间】：2021-05-19 06:03:41
【问题描述】：

我正在使用 ionic ion-slide-box 控件来显示几个图像。每个图像都有不同的高度。我正在努力将这些幻灯片中的垂直图像居中。现在整个幻灯片都对齐到顶部：

<ion-slide-box>
    <ion-slide>
        <img src="../../img/article1.png">
    </ion-slide>
    <ion-slide>
        <div style="height: 100%">
            <img src="../../img/article111.png">
        </div>
    </ion-slide>
    <ion-slide>
        <img src="../../img/article1111.png">
    </ion-slide>
</ion-slide-box>

【问题讨论】：

请使用play.ionic.io创建您的代码演示
@ManojKumar play.ionic.io/app/b3399996e760 你有 3 张不同高度的图片。我希望它们都垂直居中。
我认为整个 ion-slide 必须相对于滑块居中。
你试过我的解决方案了吗？

标签： css ionic-framework ionic

【解决方案1】：

您必须为滑块定义一些样式。

首先我们需要设置滑块全屏（考虑到有一个标题）：

.slider {
  height: 100vh;
}

然后我们需要将每个滑块中的图像居中：

.slider-slide
{
  text-align: center;  
}

最后我们需要垂直居中：

.slider-slide img {
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;
}

你可以看到它是如何工作的here。

PS：我还准备了plunker，因为它更容易看到滑块的工作原理。

【讨论】：

我不得不添加 position: relative to .slider 这有点用，但是屏幕外的高度有点太高了，所以我对高度做了一些偏移。否则，这就像一个魅力
如果您对答案感到满意，请您接受吗？干杯。

【解决方案2】：

离子 4

ion-slides{
  ion-slide{
    margin-top: auto;
    margin-bottom: auto;
  }
}

【讨论】：