Angular 4 Material 2 - Center Tab Components

user_5725010 0
Viewed 6996

I couldn't find out how to center the Angular Material Tab Component.

Can be seen here: https://material.angular.io/components/tabs/overview

I think there even is a way of doing it included, it is just very unclear what to do imo.

Below is a screenshot of the docs. What's meant by properties? Is it in html or does it need to be set in the typescript ?

I would really appreciate your help.

angular-material2 angular
4 Answers

I have also tried to align them in the center using the position in the API calls first. However, after giving up, I have added the following to the component style: 

.mat-tab-labels{
    justify-content: center;
}

Then, included the encapsulation decorator in my component typescript file:

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
@Component({
    selector: 'mytabs',
    templateUrl: './mytabs.component.html',
    styleUrls: ['./mytabs.component.scss'],
    encapsulation: ViewEncapsulation.None
})

Try it on Stackblitz

"md-stretch-tab" attribute mentioned by @Edrik, as it is stated in its name, stretches the tabs. However, in this approach we just align them in the center.

user_27149000
Related