1

我正在使用 PrimeNG 和 PrimeFlex。我想将整个表单垂直和水平居中，不包括sm手机，最好使用PrimeFlex 类。

我尝试了以下，它应该水平居中，但没有成功。

<div class="p-grid-nogutter flex justify-content-center align-items-center">

这个有效。这怎么可能？两者都应该做同样的事情。

<div class="p-grid-nogutter" style="display: flex; justify-content: center; align-items: center">

我正在使用 PrimeFlex@2.0.0 和 PrimeNG@12.0.0。

片段

<div class="p-grid-nogutter">
  <div class="p-xl-3 p-lg-3 p-md-6 p-sm-12">
    <div class="card">
      <h5>Login</h5>
      <div class="p-fluid">
        <form [formGroup]="authForm" (submit)="signIn()">
          <div class="p-field">
            <label for="username">Username</label>
            <input id="username" type="text" pInputText formControlName="username" />
          </div>
          <div class="p-field">
            <label for="password">Password</label>
            <input type="password" id="password" pPassword formControlName="password" />
          </div>
          <button pButton type="submit" label="Login" [disabled]="!authForm.valid"></button>
        </form>
      </div>
    </div>
  </div>
</div>

在此处输入图像描述

4

1 回答 1

1

这是因为您使用的是另一个版本的 PrimeFlex。请查看迁移指南：https ://www.primefaces.org/primeflex/migration

另一个可能的原因是由于盒子的高度，您可以在我在这里所做的答案中查看更多信息（答案与 Bootstrap 相关，但只是相同）：Bootstrap centering container in the middle of the page

您可以创建自己的类或更新 PrimeFlex 库来解决此类问题，其中包括许多新实用程序，包括高度实用程序：https ://www.primefaces.org/primeflex/height

希望以上链接能帮助您解决问题并祝您项目顺利！

编辑：正如@nop 所推荐的，这是 PrimeFlex < 3.0.0 的代码片段：

<div class="p-grid p-nogutter p-d-flex p-justify-center p-ai-center" style="height: 100%; min-height: 100vh">
  <!-- Your HTML code goes right here -->
</div>
于 2021-07-30T21:43:00.590 回答