我有一个登录表单和一个徽标,我将表单居中,但是我希望徽标出现在表单的顶部,即使我将与申请表单相同的类应用于登录表单,它也会出现在表单的左侧
这是我在表单上使用的课程,并且在表单之外进行潜水

.center {
    background: #bdc3c7;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #2c3e50, #bdc3c7);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #2c3e50, #bdc3c7);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.login-form {
    // min-height: 60%;
    min-width: 250px;
    width: 20%;
}


这是我的html代码

<div class='center'>
    <img src='../../../../assets/images/logos/fuse.svg' alt='logo'>
    <form (ngSubmit)="loginUser()" class='login-form'>
        <p>
            <mat-form-field>
                <input type="text" [(ngModel)]='email' matInput placeholder="Email" name='email'>
            </mat-form-field>
        </p>

        <p>
            <mat-form-field>
                <input type="password" [(ngModel)]='password' matInput placeholder="Password" name='password'>
            </mat-form-field>
        </p>
        <div class="button">
            <button type='submit' mat-raised-button style='font-size: 20px;'>Login</button>
        </div>
    </form>
</div>


单击链接以了解我在说什么
https://imgur.com/a/ZKXaas0

最佳答案

这是因为您正在使用flex。默认情况下,“ flex-direction”为“ row”。因此元素将显示在单行中。尝试以下。



.center {
flex-direction:column;
}





请将其添加到中心课程。

10-07 19:35
查看更多