离子-离子滑盒中的垂直对齐图像

Question

我正在使用离子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>

Answer 1

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

首先，我们需要将滑块设置为全屏显示（考虑到标题）：

.slider {
  height: 100vh;
}

那么我们需要将图像居中放置在每个滑块中：

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

最后我们需要垂直居中：

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

您可以在此处查看其工作方式。

PS：我还准备了一个塞子，因为更容易看到滑块的工作原理。