Ionic 如何使用 Ion-Item 包裹的物品居中答案

【问题标题】：Ionic how to center items wrapped with Ion-ItemIonic 如何使用 Ion-Item 包裹的物品居中
【发布时间】：2020-10-25 04:08:39
【问题描述】：

我已经进行了相当多的搜索并尝试并尝试了，但我无法弄清楚如何将用 <Ion-Item></Ion-Item> 包裹的离子元素居中。

以下是我看过的一些建议，但没有一个可行：

Ionic Framework Center button within ionic item

https://github.com/ionic-team/ionic/issues/17509

这是一个可行的方法，但它基本上取消了 <ion-item> 包装。这里描述的问题基本上是我也遇到的问题。

https://forum.ionicframework.com/t/how-to-center-a-ion-icon-inside-a-ion-item-ionic-4/158400

例如，我有以下内容完全符合我的要求，即使按钮在屏幕上居中，但同样不使用<ion-item>。

  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-button size="small" [routerLink]="['/someplace', itemId, item.resultId]">Edit</ion-button>
        <ion-button size="small" color="danger" (click)="onDelete(itemId, item.resultId)">Delete</ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>

但是，一旦我用<Ion-Item></Ion-Item> 包裹按钮，它就会将按钮向左对齐，无论我尝试什么，我都无法将按钮居中对齐。我用<ion-item></ion-item> 包裹我的按钮和我的大部分离子元素，因为这似乎是建议。那么我该怎么做，并且仍然可以控制用<ion-item> 包裹的内容的对齐方式。

这是不工作的：

  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-item>
        <ion-button size="small" [routerLink]="['/someplace', itemId, item.resultId]">Edit</ion-button>
        <ion-button size="small" color="danger" (click)="onDelete(itemId, item.resultId)">Delete</ion-button>
        </ion-item>
      </ion-col>
    </ion-row>
  </ion-grid>

【问题讨论】：

标签： angular ionic-framework ionic4

【解决方案1】：

我也一直在寻找解决方案。如果不将文本包装在 h 标签或 p 标签中并对它们进行样式设置，我无法找到一种方法来居中离子项目。我删除了我的 ion 项目，然后根据它们的宽度比将我的内容设置为居中：

对于像 ion-textarea 这样的东西，我将这些 css 属性设置为居中

ion-textarea{
max-width: 80vw;
margin-left: 10vw;
}

这种宽度和边距的比例也适用于 ion-items 中的按钮，但我还没有找到如何将 ion-item 内容本身居中。祝你好运！

【讨论】：

【解决方案2】：

您可以使用“ion-text-center”类。

<ion-item class="ion-text-center">
    <ion-button size="small" [routerLink]="['/someplace', itemId, item.resultId]">Edit</ion-button>
    <ion-button size="small" color="danger" (click)="onDelete(itemId, item.resultId)">Delete</ion-button>
</ion-item>

【讨论】：