离子2垂直排列使用离子网格 [英] ionic 2 vertical alignment using ion-grid

问题描述

在Ionic 2的屏幕上我有两个按钮，我想在屏幕中间（水平和垂直对齐）将它们一起对齐（一个在另一个的顶部，但是一起）。

我想使用离子网格，没有填充，边距，浮点数或百分比。

所以我有这个

 < ion-content> 
< ion-grid> 
<离子行> 
< ion-col text-center> 
<按钮>按钮1< /按钮> 
< / ion-col> 
< /离子行> 
<离子行> 
< ion-col text-center> 
<按钮>按钮2< /按钮> 
< / ion-col> 
< /离子行> 
< / ion-grid> 
< / ion-content> 
  

使用< ion-col text-center>



  ion-grid {
 justify-content：center; 
} 
  

但是什么也没有发生。
我检查了这个页面，但是由于某种原因，它并没有工作。
有什么想法？


解决方案

使用这个：



  ion-grid {
 height：100％; 
 justify-content：center; 
} 
  




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).

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

So I have this

<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>

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?

解决方案

Use this:

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

这篇关于离子2垂直排列使用离子网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！