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

时间:2015-11-05 10:43:12

标签: css ionic-framework ionic

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

enter image description here

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

2 个答案:

答案 0 :(得分:4)

您必须为滑块定义几种样式。

首先我们需要设置滑块全屏(考虑到标题):

.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,因此更容易看到滑块如何工作。

答案 1 :(得分:0)

离子 4

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