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%;
}

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

3 个答案: