私はその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と同じです):
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>