ionic angular - 如何使離子網格居中？

Question

我需要協助。 我正在嘗試將離子網格居中，但即使使用邊距自動，它也不會在具有以下代碼的頁面中居中。 你可以幫幫我嗎？

   <ion-header>
  <ion-toolbar>
    <ion-title>payer-note-de-frais</ion-title>
    <ion-button [routerLink]="['/home']">Accueil</ion-button>
    <ion-button [routerLink]="['/presence']">Presences</ion-button>
  </ion-toolbar>
</ion-header>

<div class="divNoteDeFraisSelect">
  <label>Type de Note de Frais</label>
  <ion-item>
  <select>
    <option [ngValue]="null" disabled>Selectionner type de note de Frais</option>
    <option *ngFor="let item of this._noteDeFrais" [ngValue]="item.id">{{item.name}}</option>
  </select>
  <!--  Submit</ion-button>-->
 </ion-item>
</div>
<div class="divNoteDeFraisRegulieres">
  <ion-label>prix à l'unité</ion-label>
  <input #prixUnite type="number">
  <ion-label>nombre d'unité</ion-label>
  <input #nbUnite type="number">
  <ion-button>Ajouter des depenses</ion-button>
</div>
Et pour les notes de frais exceptionnels, le tableau:

<div class="tableauNoteDeFrais">
<ion-grid>
  <ion-row>
    <ion-col size="2"></ion-col>
    <ion-col size="2">1 ere semaine </ion-col>
    <ion-col size="2">2 eme semaine </ion-col>
    <ion-col size="2">3 eme semaine</ion-col>
    <ion-col size="2">4 eme semaine</ion-col>
  </ion-row>
  <ion-row>
    <ion-col size="2">prix à l'unité </ion-col>
    <ion-col size="2"><input class="inputGrid"type="number"></ion-col>
    <ion-col size="2"><input class="inputGrid"type="number"></ion-col>
    <ion-col size="2"><input class="inputGrid"type="number"></ion-col>
    <ion-col size="2"><input class="inputGrid"type="number"></ion-col>
  </ion-row>
  <ion-row>
    <ion-col size="2">nombres Unités</ion-col>
    <ion-col size="2"><input class="inputGrid"type="number"></ion-col>
    <ion-col size="2"><input class="inputGrid"type="number"></ion-col>
    <ion-col size="2"><input class="inputGrid"type="number"></ion-col>
    <ion-col size="2"><input class="inputGrid"type="number"></ion-col>
  </ion-row>
</ion-grid>
</div>
  <div class="button">
      <ion-button class="SubmitButton">Soumettre</ion-button>
  </div>

  Prendre une photo des factures:
  <ion-fab vertical="bottom" horizontal="center" slot="fixed">
    <ion-fab-button (click)="takePhoto()">
      <ion-icon name="camera"></ion-icon>
    </ion-fab-button>
  </ion-fab>

代碼 css 是這樣的：

    ion-col{
 background-color: #135d54;
 border: solid 1px #fff;
 color: #fff;
 text-align: center;
  display: flex;
}
.divNoteDeFraisSelect{
 justify-content: center;
 margin: auto;
}
ion-grid{
 margin: auto;
}
tableauNoteDeFrais{
 margin: auto;
 justify-content: center;

}
.divNoteDeFraisRegulieres{
 width:18%;
 margin: auto;
}
.divNoteDeFraisRegulieres ion-label, .divNoteDeFraisRegulieres input {
 width: 100%;
 display: block;
}
ion-col {
 background-color: #135d54;
 border: solid 1px #fff;
 color: #fff;
 text-align: center;
}
.SubmitButton{
 width:30%;
 margin: auto;
 justify-content: center;
 display: block;
}
.inputGrid{
 width: 100%;
}

我需要的？ 我不明白。 離子網格 css 的 css 代碼不會被覆蓋，不是嗎？ 視圖是：在此處輸入圖片描述

你可以幫幫我嗎？

我需要一個 css 代碼的答案，以便在 ionic 中以角度居中表格

Answer 1

嘗試用 <ion <ion-row class="ion-justify-content-center">替換<ion-row> >

這是對齊文檔