如何在离子中水平居中元素答案

【问题标题】：How to center horizontally an element in ionic如何在离子中水平居中元素
【发布时间】：2021-03-11 15:06:10
【问题描述】：

我想将 ionic 中的元素水平居中，左右边距相同

<div class="tabs-group" class="ion-justify-content-center">

  <ion-row>
    <ion-col *ngFor="let i of tabsName,let j = index" size="4" (click)="switchToTabs(tabsindicator[j])" [ngClass]="tabs[tabsindicator[j]] ? 'primary-button' : 'secondary-button'">
      <ion-grid>
        <ion-row>
        </ion-row>
        <ion-row>
          <ion-col>
            <b>{{tabsName[j]}} </b>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-col>

  </ion-row>

</div>

ion-justify-content-center ionic CSS 类没有应用居中，这是输出：

【问题讨论】：

标签： html css ionic-framework

【解决方案1】：

您必须在 flexbox 节点上使用 ion-justify-content-center。因此，要么将 display: flex 放在包装 div 节点上，要么像这样在 <ion-row> 上使用 ion-justify-content-center。

<ion-row class="ion-justify-content-center">
      <ion-col>
        <b>{{tabsName[j]}} </b>
      </ion-col>
</ion-row>

【讨论】：