如何使离子项目内的离子按钮居中？

Question

我应该如何在 ion-item 中将 ion-button 居中？

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

我尝试了 CSS Utilities 中的一些 class，但无济于事。

Answer 1

你可以这样做：

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>

Answer 2

或者可能只是使用块展开：

<ion-list>
  <ion-item>
    <ion-button expand="block">Sample</ion-button>
  </ion-item>
</ion-list>

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