Question

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

这是我的代码： .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。我尝试使用研究中的样式，但仍然无法使用。

请帮助我对准白色背景的中心。非常感谢您的帮助。

Answer 1

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

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

与explaination一样，margin自动设置自动调整边距，以使您的div及其内容当然处于水平居中位置。

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

Answer 2

我是这样做的：

将卡片放入 a , 然后像这样设计

.login-wrapper {
    max-width: 75%;
    width: 100%;
    margin: 2em auto;
}

如何在角材料中居中登录卡

2 个答案: