如何使用MatBlazor将表单输入居中？

Question

如何使表单输入在此图像中居中？我使用这里定义的表单：https://www.matblazor.com/LayoutGrid使用这里定义的GridLayout元素https://www.matblazor.com/EditContext

​

这是我的尝试，但我肯定遗漏了一些东西：

<div class="container login-layout mat">

    <MatCard>
        <MatCardContent>
            <EditForm Model="Login" OnValidSubmit="Success">
                <div class="mat-layout-grid">
                    <div class="mat-layout-grid-inner">

                        <div class="mat-layout-grid-cell mat-layout-grid-cell-span-12">

                            <MatH2>Login</MatH2>
                        </div>

                        <div class="mx-auto
                         mat-layout-grid-cell
                         mat-layout-grid-cell-span-12">


                            <MatTextField ValidationDisabled="true" Label="Username" @bind-Value="Login.Username" />
                            <MatTextField ValidationDisabled="true" Type="Password" Label="Password" @bind-Value="Login.Username" />

                        </div>

                        <div class="mat-layout-grid-cell mat-layout-grid-cell-span-12">

                            <MatButton class="float-right">Log in</MatButton>
                            @*<MatButton class="float-right" @onclick="OnLoginClick">Log in</MatButton>*@
                        </div>
                    </div>
                </div>
            </EditForm>

            <div class="container">
                <MatCaption>Need an account? </MatCaption>

                <MatButton class="float-right aslkjd-c0ass" @onclick="OnSignUp">Sign up</MatButton>

            </div>
        </MatCardContent>
    </MatCard>
</div>

Answer 1

如果你提供了一个width或max-width，mx-auto或者说在x轴上自动边距在div中工作。尝试在输入字段本身上使用它，或者尝试给div一个宽度，或者您可以在div上使用flex justify content: center和flex-direction: column