本文介绍了离子2垂直排列使用离子网格的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在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垂直排列使用离子网格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!