How to center the ion-button inside ion-item?

Issue

How should I center ion-button inside ion-item?

<ion-list>
  <ion-item>
    <ion-button>Sample</ion-button>
  </ion-item>
</ion-list>

I tried some class from CSS Utilities but with no avail.

Solution

You can do something like this:

CSS:

.center-button {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-item: center;
}

HTML:

<ion-list>
  <ion-item>
    <div class='center-button'>
       <ion-button>Sample</ion-button>
    </div>
  </ion-item>
</ion-list>

Answered By – Wolfyr

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published