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

Question

我想将 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 类没有应用居中，这是输出：

Answer 1

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

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