ionic 2 使用 ion-grid 垂直对齐 [英] ionic 2 vertical alignment using ion-grid

问题描述

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

I have 2 buttons in a screen in Ionic 2, and I want to align them both together (one on top of the other, but together) in the middle of the screen (horizontal and vertical alignment).

我想使用 ion-grid，没有填充、边距、浮点数或百分比.

I want to use ion-grid, no paddings, margins, floats or percentages.

所以我有这个

<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> 我可以将它们水平对齐到中心，但是对于垂直对齐，我看不到任何可以应用的东西，所以我尝试了这个:

With <ion-col text-center> I can align them to the center horizontally, but for vertical alignment I can´t see anything that I can apply to , so I tried this:

ion-grid {
  justify-content: center;
}

但是什么也没发生.我检查了一下，这正在应用于页面，但由于某种原因它不起作用.有什么想法吗?

But nothing happened. I checked and this is being applied to the page, but for some reason it doesn´t work. Any ideas?

推荐答案

使用这个:

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

这篇关于ionic 2 使用 ion-grid 垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！