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

【问题标题】：How do I center the form input using MatBlazor?如何使用 MatBlazor 将表单输入居中？
【发布时间】：2020-11-20 11:01:57
【问题描述】：

如何在此图像中将表单输入居中？我正在使用此处定义的 GridLayout：https://www.matblazor.com/LayoutGrid 使用此处定义的表单元素 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>

【问题讨论】：

标签： css bootstrap-4 matblazor

【解决方案1】：

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

【讨论】：

有没有办法使用 MatBlazor 设置宽度？