0

如何在此图像中将表单输入居中？我正在使用此处定义的 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>
4

1 回答 1

0

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

于 2020-11-20T03:01:57.167 回答