1

I'm trying to center vertically an image using flex box.

This is my code:

<ion-grid>
    <ion-row>
      <ion-col>
        <div class="logo-part">
          <img id="logo" src="assets/logo/logo.png" alt="img-logo">
          <ion-title>Service at your fingertips!</ion-title>
        </div>
      </ion-col>
    </ion-row>
</ion-grid>

CSS:

ion-content ion-grid {
  height: 100%;
}
ion-content ion-row{
  height: 50%;
}
div.logo-part {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}
img{
width:25%;
text-align:center;
}

The image is not positioning in the cente vertically!

Any help please?

Thanks.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Khaled Ramadan
  • 812
  • 1
  • 10
  • 26

1 Answers1

5

That's because of flex-direction: column, when you use this, align-items starts aligning horizontally not vertically, to align vertically you will need to set justify-content: center

Just to explain this behavior: this is because justify-content aligns according to the main direction and align-items according to the intersection. So, when you change flex-direction from row (horizontal) to column (vertical), justify-content aligns vertically and align-items horizontally. - Rodrigo Ferreira

SpaceDogCS
  • 2,808
  • 3
  • 20
  • 49
  • 1
    Just to explain this behavior: this is because justify-content aligns according to the main direction and align-items according to the intersection. So, when you change flex-direction from row (horizontal) to column (vertical), justify-content aligns vertically and align-items horizontally. – Rodrigo Ferreira Mar 07 '18 at 17:29
  • Thank you, english is not my native language, I can't explain so well as you – SpaceDogCS Mar 07 '18 at 18:45