web-dev-qa-db-ja.com

Ionicイオン含有量内の4つの中心イオングリッド

私はそのh1内のイオングリッド内にイオン含有量を持っているだけです。

<ion-content no-padding no-bounce>
    <ion-grid no-padding>
        <h1>ion-grid</h1>
    </ion-grid>
</ion-content>

イオン含有量を100vhに、イオングリッドを80%に設定しています。高さ。イオンコンテンツ内のイオングリッドを垂直方向に中央揃えするにはどうすればよいですか?そしてh1をイオングリッド内で垂直方向に中央揃えにしますか?

イオンコンテンツをフレックスを表示するように設定してみましたが(これはすでにそうなっていると思います)、コンテンツセンターを揃えます。イオングリッドと同じです。

ここに私のCSSがあります:

ion-content {
    display: flex;
    height: 100vh;
    width: 100vw;
    align-content: center;

    ion-grid {
        display: flex;
        height: 80%;
        width: 100%;
        background-color: blue;
        align-content: center;
    }
}

結果はここにあります(イオングリッドは垂直方向に中央揃えされるのではなく、イオンコンテンツの上部に貼り付けられているため、align-content:centerは機能しません。イオングリッドとh1と同じです):

enter image description here

5
user10181542
Where is your row and column tags.  Like this!

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

  <ion-row>
    <ion-col size="6">
      ion-col [size="6"]
    </ion-col>
    <ion-col>
      ion-col
    </ion-col>
    <ion-col>
      ion-col
    </ion-col>
  </ion-row>
</ion-grid>
1