我使用离子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>
答案 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;
}
}