如何将 mat-horizontal-stepper 保持在页面中心答案

【问题标题】：How to keep mat-horizontal-stepper to center of page如何将 mat-horizontal-stepper 保持在页面中心
【发布时间】：2021-09-07 22:46:59
【问题描述】：

我正在使用 Angular 6 mat-horizontal-stepper。我想给它一些特定的宽度，并希望将它保持在页面的中心。对于 mat-horizontal-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;

谁能帮帮我。

【问题讨论】：

【解决方案1】：

您只需添加：margin: 0 auto。

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

【讨论】：

这就是答案。谢谢@Unacorn。我用过 ngdeep 所以它是 ::ng-deep .mat-horizontal-stepper-header-container { width: fit-content;边距：0 自动！重要； }

【解决方案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;
}

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

【讨论】：

【解决方案3】：

尝试深度

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

在 style.css 等全局 css 文件中写入样式的替代方法将很快被弃用

【讨论】：

mat-horizontal-content-container 工作正常，如图所示。我希望 mat-horizontal-stepper-header-container 居中对齐。@Vaibhav Phutane