Angular mat-form-field居中对齐

Question

无论哪里，你都可以找到如何居中文本、占位符和标签等内容，但我无法将整个表单字段居中，看起来丑陋不堪。

<div class="mat-app-background basic-container">
  <div layout-gt-sm="column" style="min-width: 350px; max-width: 450px; margin:auto">
    <mat-card flex-gt-sm class="push">
      <div style="text-align:center;">
        <mat-card-title>Login</mat-card-title>
      </div>
      <div style="text-align:center;">
      <mat-card-content>
        <form [formGroup]="loginForm" class="form" (ngSubmit)="login()">
          <table cellspacing="0">
            <tr>
              <td>
                <mat-form-field>
                    <div style="text-align:center;">
                  <input matInput placeholder="{{ 'LOGIN.USERNAME' | translate }}" name="username"
                    formControlName="username" type="name" />
                  <mat-error *ngIf="formErrors.username" class="form__error">{{ formErrors.username }} </mat-error>
                </div>
                </mat-form-field>
              </td>
            </tr>

我希望这段代码有用。如果不行的话，我会发布剩下的HTML代码。但是它只涉及到居中字段。这里没有使用CSS。

- CptDayDreamer

---

你可以像这样包装它：<div class="flexbox-parent"> <div layout="row" layout-align="center center">用户名和密码字段</div></div> - Caleb Davenport

看看是否有效 - 如果无效，您可以在fiddle或stackblitz上发布代码片段，我可以帮助您。 - Caleb Davenport

Answer 1

我建议您使用弹性盒子布局。

我也不确定为什么您需要将其放在一个<span>标签中，但为了简化演示，我已经将其移除了。

<div class="parent">
  <mat-form-field>
    <div style="text-align:center;">
      <input matInput placeholder="{{ 'LOGIN.USERNAME' | translate }}" name="username" formControlName="username" type="name" />
      <mat-error *ngIf="formErrors.username" class="form__error">{{ formErrors.username }} </mat-error>
    </div>
  </mat-form-field>
</div>

关于你的CSS,

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

属性justify-content和align-items的值为center将分别沿着行和交叉轴居中flex子项，从而将它们放置在页面的中心。属性flex-direction的值为column会将子项（表单字段）从上到下对齐。

- wentjun

---

你不确定为什么我需要把它放在哪里？对我来说它根本不起作用。 - CptDayDreamer

抱歉，我的意思是将其放入表格中* - wentjun

抱歉，我最近几天没能工作。对我来说它不起作用。@wentjun，什么也没有发生。 - CptDayDreamer

当我在HTML中为div设置style="display..."时，它确实起作用。但是CSS没有应用。已经删除了表格等内容。 - CptDayDreamer

Answer 2

您可以将style="text-align:center;"放置在input元素中。

<mat-form-field appearance="outline" [style.width.em]="8">
    <mat-label>Início</mat-label>
    <input style="text-align:center;" type="text" maxlength="10" matInput formControlName="segundaInicio">
</mat-form-field>

- Fabricio Leite