Question

我只是在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相同）：

Answer 1

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>

Answer 2

通过以下3行，我们可以添加居中文本。

    <ion-content padding>   
<ion-grid style="height: 100%">
   <ion-row justify-content-center align-items-center style="height: 100%">
        <h1>ion-grid</h1> 
  </ion-row> 
</ion-grid>
 </ion-content>

这是示例链接。

https://stackblitz.com/edit/ionic-sv2c8k

Answer 3

我个人使用此CSS代码将所有内容居中，将其放在您的app.scss文件中，并在每次要在ion-col组件内垂直和水平居中时调用它：

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

所以您的解决方案在这里：

<ion-content no-padding no-bounce>
    <ion-grid no-padding>
      <ion-row>
        <ion-col class="flex">
          <h1>ion-grid</h1>
        </ion-col>
      </ion-row>
    </ion-grid>
</ion-content>

离子含量内的Ionic 4中心离子网格

3 个答案: