css - 如何在角度材料中居中登录卡

问题描述

我在将登录卡居中时遇到困难。这是它现在的样子：

这是我的代码： .html

<!-- ============================================================== -->
<!-- Simple four boxes Row -->
<!-- ============================================================== -->
<div fxLayout="row" fxLayoutWrap="wrap">
    <!-- column -->    
    <div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100">
        <mat-card>
            <mat-card-content>
                <!-- Row -->
                <div fxLayout="row" fxLayoutWrap="wrap">
                    <!-- column -->
                    <div fxFlex.gt-sm="50" fxFlex.gt-xs="50" >
                        <div class="contains">
                            <div class="login-box">
                                    <mat-card class="mat-elevation-z2" style="background-color: #26C6DA">
                                            <mat-card-header style="background-color: teal; color: whitesmoke;">Login</mat-card-header>
                                            <mat-card-content>
                                              <form class="form my-2 my-lg-0" #loginForm="ngForm" (ngSubmit)="login()">
                                                <mat-form-field>
                                                  <input type="text" class="text-white" placeholder="Username" name="username" [(ngModel)]="model.username" required matInput/>
                                                </mat-form-field>
                                                <mat-form-field>
                                                  <input type="password" placeholder="Password" name="password" [(ngModel)]="model.password" required matInput/>
                                                </mat-form-field>
                                                <button
                                                  type="submit"
                                                  mat-raised-button
                                                  class="btn btn-primary btn-sm btn-block"
                                                  [disabled]="!loginForm.valid"
                                                >
                                                  Submit
                                                </button>
                                              </form>
                                            </mat-card-content>
                                          </mat-card>
                                </div>

                        </div>
                        <br/><br/>
                    </div>
                </div>      
            </mat-card-content>
        </mat-card>
    </div>
    <!-- column -->    
</div>

这是在 CSS

.contains {
    text-align: center;
}

.login-box, .register-box {
    display: inline-block;
    margin: auto;
    width: 75%;
}.login-page, .register-page {
    background: #d2d6de;
}

我正在尝试学习 css 和/或 flexbox 和 bootsrap。我尝试过使用研究中的样式，但我仍然无法让它发挥作用。

请帮我对齐到白色背景的中心。我真的很感谢你的帮助。

标签： csshtmlangular-material

将此 css 应用到登录卡本身，即class="login-box".

.login-box{
    margin: auto;
    margin-top: 15%;
}

作为解释，margin auto 将自动西装边距设置为水平居中您的 div 及其内容当然是您的 mat-card。

我喜欢使用margin-top: 15%网站顶部的空间，通常看起来不错。它将如下所示：

css - 如何在角度材料中居中登录卡

问题描述

解决方案

推荐阅读