CODEWITHSUNDEEP
cssionic-framework
Marcin86
Marcin86

Reputation: 131

Ionic - vertical align image in ion-slide-box

I'm using ionic ion-slide-box control to display couple of images. Each image has a different height. I'm struggling to center vertically images inside these slides. Right now entire slide is aligned to top:

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>

Upvotes: 2

Views: 5946

Answers (2)

Hassan El khalifte
Hassan El khalifte

Reputation: 634

Ionic 4

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

Upvotes: 0

LeftyX
LeftyX

Reputation: 35597

You have to define a few styles for your slider.

First of all we need to set the slider full screen (considering there's an header):

.slider {
  height: 100vh;
}

then we need to center the image in each slider:

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

and last we need to center vertically:

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

You can see how it works here.

PS: I've prepared a plunker as well cause it's easier to see how the slider works.

Upvotes: 6

Related Questions