How to keep mat-horizontal-stepper to center of page

Question

I am using Angular 6 mat-horizontal-stepper. I want to give some specific width to it and want to keep it in center of page. For mat-horizontal-content-container i am able to keep it in center

.mat-horizontal-content-container 
    text-align: center;
    overflow: hidden;
    padding: 0;

But how to keep the header to center of page.I am trying this but it is not working.

.mat-stepper-label-position-bottom .mat-horizontal-stepper-header-container 
    width: fit-content !important;
    align-items: center;

Can anyone please help me with this.

score 5 · Answer 1 · answered Jan 15 '21 at 12:54

5

You just need to also add: margin: 0 auto.

.mat-stepper-label-position-bottom .mat-horizontal-stepper-header-container {
    width: fit-content;
    margin: 0 auto;
}

answered Jan 15 '21 at 12:54

Unacorn

155
2
5

1

This is the answer. Thanks @Unacorn. I used ngdeep So it is ::ng-deep .mat-horizontal-stepper-header-container { width: fit-content; margin: 0 auto !important; } – Kris Swat Mar 04 '21 at 22:10

score 0 · Answer 2 · answered Sep 07 '21 at 14:46

In your component.html:

<div class="stepperContainer">
<mat-horizontal-stepper #stepper>
   your stepper content will go here
</mat-horizontal-stepper>

In your component.css :

.stepperContainer{
width: fit-content;
margin: 0 auto;
}

This will align the stepper to the center.

score -1 · Answer 3 · answered Mar 27 '19 at 19:01

-1

Try with deep

  /deep/.mat-horizontal-content-container {
        text-align: center;
        overflow: hidden;
        padding: 0;
    }

As deep will be deprecate soon alternative approach to write your style in global css file like in style.css

answered Mar 27 '19 at 19:01

Vaibhav Phutane

52
10

mat-horizontal-content-container is working fine as you can see in image. I want mat-horizontal-stepper-header-container to be align in center.@Vaibhav Phutane – ananya Mar 27 '19 at 19:33

How to keep mat-horizontal-stepper to center of page

3 Answers3