Angular tab – Cant place the two tabs buttons centered and 50% witdh
This is my application that i am trying to build : 
I am working on the blue tab, that is a Angular tab. My project is on Ionic, but i couldnt make the ionic tab to work, so i made a angular that i am more familirized with.
My goal is to make the two tab buttons with 50% witdh of the tab bar but i tried averything i cant make that.
My tab:
<mat-tab-group color= "primary" backgroundColor="primary" headerPosition="below"> <mat-tab label="Oponent Damage" > <div *ngIf="this.pokemon1WasSelected && this.pokemon2WasSelected && this.leagueSelected && this.lifeCreated"> <div *ngFor="let eachMove of this.leaguePokemon[this.pokemonNumber2].moves;let i=index"> <ion-row> <ion-col><p>{{eachMove}}</p></ion-col> <ion-col size="3"><p> HP: {{this.pokemonHPShow[i]}}</p></ion-col> <ion-col><p> Move Damage: {{this.allMovesDamageArray[i]}}</p></ion-col> </ion-row> <ion-row> <ion-col> <ion-progress-bar [value]="pokemonHPbyMoveArray[i]"></ion-progress-bar> </ion-col> <ion-col id="teste1" size="3"> <div> <p [ngClass]="{'green-class': this.tankItAwnserArray[i] === 'YES!', 'orange-class': this.tankItAwnserArray[i] === 'Optional', 'red-class': this.tankItAwnserArray[i] === 'NO!' }"> {{this.tankItAwnserArray[i]}} </p> </div> </ion-col> </ion-row> </div> </div> </mat-tab> <mat-tab label="Your Damage"> Content 2 </mat-tab> </mat-tab-group> I have other problems, but for now i am trying to solve this one. God i have css and this alight things xD
According to the Angular Material documentation, you could center the tabs with mat-align-tabs="center".
In your case, since you want the tabs to have 50% width, you can simply stretch the tabs:
<mat-tab-group mat-stretch-tabs color="primary" backgroundColor="primary" headerPosition="below"> <mat-tab label="Oponent Damage" >...</mat-tab> <mat-tab label="Your Damage">...</mat-tab> </mat-tab-group> 
