如何将 mat-h​​orizo​​ntal-stepper 保持在页面中心

Question

我正在使用 Angular 6 mat-h​​orizo​​ntal-stepper。我想给它一些特定的宽度，并希望将其保留在页面的中心。对于 mat-h​​orizo​​ntal-content-container 我能够将其保持在中心

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

但是如何将标题保持在页面中心。我正在尝试这个，但它不起作用。

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

谁能帮我解决这个问题吗？

Answer 1

您只需要添加：margin: 0 auto。

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