角形垫-形场中心对齐

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。

Answer 1

我建议您使用flexbox。

我也不知道您为什么需要将其放在内，但为了简化演示我已将其删除。

<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使子级（表单域）从上到下对齐。

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>