垂直对齐离子卡的中心 [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 设置为flexjustify-contentalign-items 设置为center

【讨论】:

以上是关于垂直对齐离子卡的中心 [IONIC]的主要内容,如果未能解决你的问题,请参考以下文章

在离子中垂直对齐行中的列

如何在iOS和Android屏幕中间(垂直和水平)对齐离子卡?

如何在 Bootstrap 4 中的图像覆盖卡上垂直对齐?

ul li 文本垂直对齐略低于垂直中心

如何垂直对齐段落中心

如何在离子4中单击向下和向上箭头图标按钮垂直离子项目滚动到底部和顶部?