垂直对齐离子卡的中心 [IONIC]
Posted
技术标签:
【中文标题】垂直对齐离子卡的中心 [IONIC]【英文标题】:Vertically align center for a ion-card [IONIC] 【发布时间】:2018-05-19 13:56:51 【问题描述】:我正在开发一个登录表单,所以在我的<ion-content padding >
中有一个<ion-card>
(用作登录表单的容器),我想垂直居中。我尝试了使用 css flexbox 和其他 css 技巧的不同方法,但对我没有任何帮助!卡片保留在页面顶部。
你能帮帮我吗?
<ion-card id = "login-card">
<form [formGroup]="signInForm" (submit)="doEmailPswLogin()" class="input">
<ion-list>
<ion-item>
<ion-label fixed>Email</ion-label>
<ion-input type="email" [(ngModel)]="email" formControlName="email"></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>Password</ion-label>
<ion-input type="password" [(ngModel)]="password" formControlName="password"></ion-input>
</ion-item>
<div padding>
<button ion-button color="primary" block [disabled]="buttonDisabled">Effettua il login</button>
</div>
</ion-list>
</form>
</ion-card>
我在此页面上没有任何类型的 scss。我所做的所有测试都是无用的(卡没有移动一毫米),除了在卡上使用 margin-top,但这不是正确的方法,我想要一些响应! 提前谢谢!
解决方案
我使用了这个代码,我的卡现在居中了!
<ion-grid style="height: 100%">
<ion-row justify-content-center align-items-center style="height: 100%">
<ion-card id = "login-card">
<form >
<ion-list>
<ion-item>
<ion-label fixed>Email</ion-label>
<ion-input type="email" name="email"></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>Password</ion-label>
<ion-input type="password" name="password"></ion-input>
</ion-item>
<div padding>
<button ion-button color="primary" block >Effettua il login</button>
</div>
</ion-list>
</form>
</ion-card>
</ion-row>
</ion-grid>
【问题讨论】:
感谢您的解决方案很有用! 【参考方案1】:另一件可以快速完成的事情是将scroll-content's
display
设置为flex
和justify-content
和align-items
设置为center
。
【讨论】:
以上是关于垂直对齐离子卡的中心 [IONIC]的主要内容,如果未能解决你的问题,请参考以下文章