使離子內容（或文本或標簽）垂直居中

Question

我想實現這樣的目標：

但我目前處於那個階段

請注意，第一個圖像是引導程序形式，第二個圖像是我用 ionic 設計的 [有一些原因我不想在我的 ionic 項目中拖動引導程序，所以，顯然一切都不會是 100% 完美的外觀，但是我想得到更接近它的東西]

我的問題是：

1. 如何將項目名稱設置為垂直居中？ [見第二張圖片，我已經嘗試過justify-content-center && align-items-center ]
2. 如何將項目名稱的文本與Apple對齊（如第一張圖片）[我嘗試class="ion-float-left"但如果我給與否，在第二張圖片中，項目名稱保持不變，如果我將整個ion-row （見代碼）放在ion-list下，看起來很可怕]

這是我的離子代碼

產品列表.page.html

<ion-header>
  <ion-toolbar color="primary" class="ion-text-center">
    <ion-title>Stock</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-grid>
    <ion-row>
      <ion-col size-md="6" offset-md="3">
        <ion-card>
          <ion-card-header>
            <ion-card-title>

            </ion-card-title>
          </ion-card-header>
          <ion-card-content>

            <ion-row class="background1 justify-content-center align-items-center" style="height: 100%" >
              <ion-col>
                <ion-text class="ion-float-left" style="font-size: 12px; font-weight: bold; ">Item Name</ion-text>
              </ion-col>
              <ion-col>
                <ion-button (click)=onBackButtonPressed() color="secondary" class="ion-float-right" size="small">
                  Back
                </ion-button>
              </ion-col>
            </ion-row>
            
            <ion-list *ngIf="currentList">
              <ion-item *ngFor="let item of currentList" (click)="setIonList(item)">
                {{item}}
              </ion-item>
            </ion-list>

          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Answer 1

將<ion-grid>包裹在<div>下並在div處制作height: 100% （您需要垂直居中，因此包裹層應為 100%），然后display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
我正在用<div>影響<ion-grid> ，請確保

1. 除了<div>之外，其他任何東西都不會影響<ion-grid> >
2. 你的<div>不受其他東西的影響

否則，您可能需要不同的實現。

最后它看起來像這樣：

這是代碼：

  <ion-grid>
    <ion-row>
      <ion-col size-md="6" offset-md="3">
        <ion-card>
          <ion-card-header>
            <ion-card-title>

            </ion-card-title>
          </ion-card-header>
          <ion-card-content>

            <ion-row class="background1 justify-content-center align-items-center" style="height: 100%" >
              <ion-col>
                <ion-text class="ion-float-left" style="font-size: 12px; font-weight: bold; ">Item Name</ion-text>
              </ion-col>
              <ion-col>
                <ion-button  color="secondary" class="ion-float-right" size="small">
                  Back
                </ion-button>
              </ion-col>
            </ion-row>
            
            <ion-list >
              <ion-item>
                <ion-text>Hi</ion-text>
              </ion-item>
              <ion-item>
                <ion-text>Hello</ion-text>
              </ion-item>
            </ion-list>

          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>


</div>

學分：

從離子論壇，我得到了這個問題的幫助：

https://forum.ionicframework.com/t/ion-card-center-alignment/170521/8

在那里查看saad-ansari的回復。

Answer 2

我不使用 Ionic，但通常人們在 CSS 中執行此操作以將一些文本垂直對齊到中心：

{
    display: table-cell;
    vertical-align: middle;
}

或者

{
    line-height: 50px;  /* assuming the height of the element is 50px */
}

您可能還希望考慮 'padding-top' 屬性，它不像上面那樣完全自動。

2.只需使用margin-left，例如：

{ margin-left: 1vw; }