Ionic 3 网格不垂直居中行项目

Posted 2023-03-13

【中文标题】Ionic 3 网格不垂直居中行项目

【英文标题】：Ionic 3 grid doesn't center vertically rows items

【发布时间】：2018-04-05 15:05:41

【问题描述】：

Ionic 组件 Grid 不确定为什么不将它们居中。我已经尝试了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>

结果我需要

【问题讨论】：

你能在你想要的地方显示最终的 UI 吗？即它的图像。

我希望这两个输入垂直居中。意味着它们应该从顶部和底部具有相等的宽度空间

【参考方案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;
        
     

用户界面

【讨论】：

感谢您的回答，但只是想问一下为什么他们的 css 实用程序没有按照他们的文档工作..我可以使用它只是想知道为什么文档 justify-content-center align-items-center没用..

这是为了不同的目的。它说All columns can be vertically aligned inside of a row。所以你可以看到它确实inside the row。但是你需要在行之外。您可以使用不同的属性在这里玩。然后您会意识到它。 stackblitz.com/edit/ionic-phy7tt?file=pages%2Fhome%2Fhome.html

再次快速提问 flex 属性定义了长度而不是高度......那么这是如何工作的......

flex 属性定义了元素应该占用多少可用空间。您可以在此处了解更多信息：joshmorony.com/an-in-depth-look-at-the-grid-system-in-ionic-2

w3schools.com/css/css3_flexbox.asp 根据本文档 flex 属性定义长度？与仅询问的标准相比，Ionic 是否有可能做一些不同的事情