Question

我有一个登录表单和一个徽标，我将表单居中，但是我希望徽标出现在表单的顶部，即使我应用与登录表单相同的类，它也会出现在表单的左侧形成这是我在表单上使用的类，并深入到表单之外

.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

Answer 1

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

.center {
flex-direction:column;
}

请将其添加到中心课程。

Answer 2

需要进行2处小更改：添加flex-direction和删除min-width。

这是可行的解决方案：https://codepen.io/NehhaSharma/pen/XWWaxKX

谢谢

Neha

如何居中对齐两个元素？

2 个答案: