无论哪里,你都可以找到如何居中文本、占位符和标签等内容,但我无法将整个表单字段居中,看起来丑陋不堪。
<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。
<div class="flexbox-parent"> <div layout="row" layout-align="center center">用户名和密码字段</div></div>
- Caleb Davenport