Question

离子组件网格不确定它为什么不以它们为中心。我已经尝试了vertical alignment的官方文档仍然无法正常工作。如果需要任何其他细节，请告诉我。

<ion-content>

   <ion-row justify-content-center align-items-center>
      <ion-item>
        <ion-label stacked color="primary">Username</ion-label>
        <ion-input [(ngModel)]="login.username" name="username" type="text" #username="ngModel" spellcheck="false" autocapitalize="off"
          required>
        </ion-input>
      </ion-item>
    </ion-row>
    <ion-row justify-content-center align-items-center>

      <ion-item>
        <ion-label stacked color="primary">Password</ion-label>
        <ion-input [(ngModel)]="login.password" name="password" type="password" #password="ngModel" required>
        </ion-input>
      </ion-item>
    </ion-row>

  </ion-grid>

</ion-content>

结果我需要

Answer 1

我使用flex完成了它，如下所示。

工作stackblitz

HTML 的

<ion-content padding class="sign-in">
    <ion-grid>
        <ion-row class="row1">
        </ion-row>
        <ion-row class="row2">
            <ion-col col-12>
                <ion-item>
                    <ion-label stacked color="primary">Username</ion-label>
                    <ion-input [(ngModel)]="login.username" name="username" type="text">
                    </ion-input>
                </ion-item>
                <ion-item>
                    <ion-label stacked color="primary">Password</ion-label>
                    <ion-input [(ngModel)]="login.password" name="password" type="password">
                    </ion-input>
                </ion-item>
            </ion-col>
        </ion-row>
    </ion-grid>

</ion-content>

.scss

  .sign-in {
        ion-grid {
            min-height: 100%;
        }
        .row1 {
            flex: 1;
        }
        .row2 {
            flex: 1;
        }
     }

UI

离子3网格不垂直居中行项目

1 个答案: