Question

我有一个离子幻灯片页面：

<ion-content padding>

    <ion-slides pager="true">
        <ion-slide class="step-one">
            <h1>Welcome</h1>
            <p>Lorem ipsum dolor sit amet, massa nam ante. Vel lacus viverra volutpat tortor ligula ornare, varius ut mauris ipsum mus torquent, scelerisque suspendisse penatibus, purus et arcu ipsum vehicula quam luctus. Consectetuer sed urna accumsan. Nec viverra felis varius pretium, volutpat in et cras, odio consectetuer lacinia risus feugiat sit etiam, commodo pulvinar, dolor non et inventore.</p>
            <p>  </p> <!-- TODO: figure out how to add spacing properly -->
        </ion-slide>

        <ion-slide class="step-two">
            <h1>Heading</h1>
            <p>blah, blah</p>
        </ion-slide>

        <ion-slide class="step-three">
            <h1>Heading</h1>
            <p>blah, blah</p>

            <ion-button (click)='finish()'>FINISH!</ion-button>
        </ion-slide>
    </ion-slides>

</ion-content>

如何使离子载玻片垂直居中？目前它位于页面顶部。

Answer 1

对我来说，解决方案是添加此CSS：

.slides {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100%;
}

如何在离子含量中垂直居中对齐离子幻灯片？

1 个答案: