我正在开发一个登录表单,所以在我的 <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>
最佳答案
另一件可以快速完成的事情是将 scroll-content 的
display
设置为 flex
和 justify-content
和 align-items
到 center
。
关于ionic-framework - 垂直对齐 ionic 卡的中心 [IONIC],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47661530/