How can I align the form inputs in the center of this image? The GridLayout I am using is defined here: and the form elements are defined here: https://i.sstatic.net/OlC7D.png
This is my code attempt but it seems like something is missing:
<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="text-center 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 text-right">
<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>