离子2垂直对齐使用离子网格

Question

我在Ionic 2的屏幕上有2个按钮,我想在屏幕中间(水平和垂直对齐)将它们对齐在一起(一个在另一个上面,但在一起).

我想使用离子网格,无填充,边距,浮点数或百分比.

所以我有这个

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col text-center>
        <button>button 1</button>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col text-center>
        <button>button 2</button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

随着<ion-col text-center>我可以水平对齐它们到中心,但是对于垂直对齐我不能看到任何东西,我可以申请,所以我尝试这样做:

ion-grid {
  justify-content: center;
}

但什么都没发生.我检查过,这是应用于页面,但由于某种原因它不起作用.有任何想法吗？

Answer 1

用这个:

ion-grid {
    height: 100%;
    justify-content: center;
}

Answer 2

您可以在离子网格内的列(例如:flex-col)中使用以下代码来垂直和水平对齐:

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

Answer 3

如果你这样做,你可以使用更多的Ionic,然后只需在Sass文件中应用高度.你也不需要ion-col.此外,课程已经改变,只是.grid和.row

标记

  <ion-content>

    <ion-grid>
      <ion-row justify-content-center align-items-center>

        Horizontally and Vertically Centered

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

  </ion-content>

萨斯

.grid, .row {
  // Force grid to fill height of content as this is not set by default
  height: 100%;
}