Could not place image to center in ion-slides

Question

I am trying to design a slide inside an ion item everything works fine but image inside the slide is not placed in center .

<ion-item style="height:45%; padding-left: 0;">
  <ion-slides centeredSlides="true" zoom="true" class="image-slider" loop="true" slidesPerView="1">
    <ion-slide *ngFor="let img of images">
      <img style="max-width:100%; text-align: center; max-height:100%;" src="{{img}}" class="thumb-img" imageViewer/>
    </ion-slide>
  </ion-slides>
</ion-item>

In my ts file I have an array of url

    images =[   'https://pay.google.com/about/static/images/social/knowledge_graph_logo.png',
            'https://connectnigeria.com/articles/wp-content/uploads/2018/05/google-apps.jpg',
            'http://www.google.com/logos/doodles/2015/tu-bav-2015-5651988540817408-hp2x.jpg'
        ];

when I do like this I am getting a blank space on my left side i want to place the image to center and along with sliding ui

Asiya Fatima Asiya Fatima · Accepted Answer · 2018-10-16T06:02:50

ion-slides.image-slider {
    display: flex;
    justify-content: center;
    align-items: center;
}

  <ion-item  style="height:45%; padding-left: 0;">
        <ion-slides centeredSlides="true" zoom="true" class="image-slider" loop="true" slidesPerView="1">
            <ion-slide  *ngFor="let img of images">
                    <img style="max-width:100%; text-align: center; max-height:100%;"  src=https://image.ibb.co/k303BL/111.jpg class="thumb-img" imageViewer/>
            </ion-slide>
   </ion-slides>
</ion-item>

Could not place image to center in ion-slides

1 Answers