集中md卡角材料

时间:2018-06-10 23:16:41

标签: css angular angular-material

我使用角度6和角度材料,但没有任何作用。我想把我的登录卡放在页面中间

html:

<mat-card class="card" layout-align="center center">
  <form (ngSubmit)="onSubmit(UserLogin)">
    <div class="container">
      <mat-form-field>
        <input matInput placeholder="E-mail" [formControl]="email" required>
        <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Senha" [type]="hide ? 'password' : 'text'" [formControl]="password">
        <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
      </mat-form-field>
      <div>
        <button mat-raised-button color="accent" type="submit">Entrar</button>
      </div> 
    </div>
  </form>
</mat-card>

enter image description here

2 个答案:

答案 0 :(得分:3)

在组件

的css文件中添加它
:host{
  display: flex;
  min-height: 100vh;
}
mat-card{
  margin: auto;
}

答案 1 :(得分:0)

您可以使用timezones = [tz.lower() for tz in pytz.all_timezones] 左侧和顶部定位,转换应该正常工作

&#13;
&#13;
@Injectable()
export class LoggedGuard implements Resolve<Action> {

  constructor ( private store: Store<AppState>, private action$: Actions, private router: Router ) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Action> {

    const responseOK = this.action$.ofType(userActions.USER_ACTUAL_INFO_CHANGE).pipe();
    const responseError = this.action$.ofType(userActions.USER_ACTUAL_INFO_CHANGE_FAILED).pipe(tap(() => this.router.navigate([''])));

    return race(responseOK, responseError);
  }
}
&#13;
position:absolute
&#13;
&#13;
&#13;