如何使用Angular Flex布局垂直居中? [英] How to center vertically with Angular Flex Layout?

问题描述

我已经创建了一个简单的登录组件，并且想垂直居中，但是我不确定如何使用Angular Flex Layout库来实现这一点.

app.component.html

<router-outlet></router-outlet>

login.component.html

<div fxLayout fxLayoutAlign="center center">
    <mat-card fxFlex="30%">
        <mat-card-title>Login</mat-card-title>

        <mat-card-content fxLayout="column">
            <mat-form-field>
                <input matInput placeholder="Username">
            </mat-form-field>
            <mat-form-field>
                <input matInput placeholder="Password">
            </mat-form-field>
        </mat-card-content>

        <button mat-raised-button color="accent">Login</button>
    </mat-card>
</div>

styles.scss

body{
    margin: 0;
    background-color: #eff2f5;
}

屏幕截图:

解决方案

如果容器元素与其内容的高度相同，则使用flexbox垂直居中的元素将无效.在您的示例中使顶层<div>占用height: 100%的所有可用垂直空间(或其他一些特定于Angular Flex Layout的解决方案，如果可能的话-fxFlexFill)应将其内容居中放置在您想要的位置.

I've created a simple login component and I'd like to vertically center, but I'm not sure how to achieve this using the Angular Flex Layout library.

app.component.html

<router-outlet></router-outlet>

login.component.html

<div fxLayout fxLayoutAlign="center center">
    <mat-card fxFlex="30%">
        <mat-card-title>Login</mat-card-title>

        <mat-card-content fxLayout="column">
            <mat-form-field>
                <input matInput placeholder="Username">
            </mat-form-field>
            <mat-form-field>
                <input matInput placeholder="Password">
            </mat-form-field>
        </mat-card-content>

        <button mat-raised-button color="accent">Login</button>
    </mat-card>
</div>

styles.scss

body{
    margin: 0;
    background-color: #eff2f5;
}

screenshot:

解决方案

Vertically centering elements with flexbox has no effect if the container element is the same height as its contents. Making the top level <div> in your example take up all the available vertical space with height: 100% (or some other Angular Flex Layout specific solution if available - maybe fxFlexFill) should center its contents right where you want them.

这篇关于如何使用Angular Flex布局垂直居中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！