Угловое выравнивание по центру поля формы

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 .

Я также не уверен, почему вам нужно поместить его внутрь a, но я удалил его, чтобы упростить демонстрацию.

<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-direction со значением column выравнивает дочерние элементы (поля формы) сверху вниз.