你可以在任何地方找到如何使文本居中,甚至是占位符和标签以及所有内容,但我无法将整个表单字段置于中心位置,它看起来很难看。
<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。
我建议你使用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
属性将孩子(表单字段)从上到下对齐。