* I have a <mat-card>
that i want to center in the middle of the screen I tried but it didn't center. It should looks good in toggle-device-toolbar
because its for phones, i need some help with this.Im using angular-material
and ng-bootstrap
*
This is the code of the <mat-card>
<div class="container ">
<mat-card>
<mat-radio-group aria-label="Select an option" [(ngModel)]="radio_btn">
<mat-radio-button [value]="true" >Admin</mat-radio-button>
<mat-radio-button [value]="false">User</mat-radio-button>
</mat-radio-group>
<div class="row justify-content-center" *ngIf="radio_btn==true;else form2">
<form class="example-form " [formGroup]="loginForm" (ngSubmit)="send()">
<mat-form-field class="example-full-width">
<input matInput formControlName="Identifier" placeholder="User" >
</mat-form-field><br>
<div *ngIf="loginForm.get('Identifier').hasError('Identifier') && loginForm.get('Identifier').touched">Introduce an email</div><br>
<mat-form-field class="example-full-width">
<input matInput formControlName="Password" placeholder="Password" type="password">
</mat-form-field><br>
<div *ngIf="loginForm.get('Password').hasError('Password') && loginForm.get('Password').touched">Introduce the correctly password</div><br>
<button mat-raised-button [disabled]="loginForm.invalid" class="colour_button " type="submit">Login 1</button>
</form>
</div>
</mat-card>
</div>
This is how it looks like right now
You can do it with Flexbox
In the style of the component you have to add:
.container {
display: flex;
align-items: center;
justify-content: center;
}
Also, if you change grid
for flex
it should work too.
.container {
display: grid;
align-items: center;
justify-content: center;
}
This is how i solve it
This is my css file
.center{
width: 75%;
margin: 10px auto;
}
.main-div{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
This is my html file
<div class="main-div">
<mat-card class="z-depth center" flex="50" >
<mat-radio-group aria-label="Select an option" [(ngModel)]="radio_btn">
<mat-radio-button [value]="true" >Admin</mat-radio-button>
<mat-radio-button [value]="false">User</mat-radio-button>
</mat-radio-group>
<div *ngIf="radio_btn==true;else form2">
<form class="example-form " [formGroup]="loginForm" (ngSubmit)="send()">
<mat-form-field class="example-full-width">
<input matInput formControlName="Identifier" placeholder="User" >
</mat-form-field><br>
<div *ngIf="loginForm.get('Identifier').hasError('Identifier') && loginForm.get('Identifier').touched">Introduce an email</div><br>
<mat-form-field class="example-full-width">
<input matInput formControlName="Password" placeholder="Password" type="password">
</mat-form-field><br>
<div *ngIf="loginForm.get('Password').hasError('Password') && loginForm.get('Password').touched">Introduce the correctly password</div><br>
<button mat-raised-button [disabled]="loginForm.invalid" class="colour_button " type="submit">Login 1</button>
</form>
</div>
</mat-card>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.