css - 如何将 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;
}

Answer 2

在您的 component.html 中：

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

在您的 component.css 中：

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

这将使步进器与中心对齐。

Answer 3

尝试深

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

深度将很快被弃用，在全局 css 文件中编写样式的替代方法，如 style.css