如何通过 flex-layout 使材料步进器水平居中？答案

【问题标题】：How to center horizontally material stepper by flex-layout?如何通过 flex-layout 使材料步进器水平居中？
【发布时间】：2019-01-17 16:44:54
【问题描述】：

我尝试在我的项目中仅使用 flex-layout 并避免使用 vanilla css。我无法弄清楚如何使水平角度材料步进器居中并获得良好的视野。我检查了margin: 0 auto;，它工作正常。这是我的代码：

<mat-vertical-stepper [linear]="true" #stepper fxLayoutAlign="center center" fxLayout="column">
  <mat-step>
    <form>
      <ng-template matStepLabel>
        Fill out ballot name
      </ng-template>
      <mat-form-field>
        <input matInput placeholder="Ballot name">
      </mat-form-field>
      <div>
        <button mat-flat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>

  <mat-step>
    <form fxLayout="column">
      <ng-template matStepLabel>
        Select start and end time
      </ng-template>
      <mat-form-field>
        <input matInput [matDatepicker]="pickerStart" placeholder="Choose a start date">
        <mat-datepicker-toggle matSuffix [for]="pickerStart"></mat-datepicker-toggle>
        <mat-datepicker #pickerStart></mat-datepicker>
      </mat-form-field>
      <mat-form-field>
        <input matInput [matDatepicker]="pickerEnd" placeholder="Choose a end date">
        <mat-datepicker-toggle matSuffix [for]="pickerEnd"></mat-datepicker-toggle>
        <mat-datepicker #pickerEnd></mat-datepicker>
      </mat-form-field>
      <div fxLayoutGap="5px">
        <button mat-flat-button matStepperPrevious>Back</button>
        <button mat-flat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>

  <mat-step>
    <form>
      <ng-template matStepLabel>
        Enter a description of ballot
      </ng-template>
      <mat-form-field>
        <textarea matInput placeholder="Description"></textarea>
      </mat-form-field>
      <div fxLayoutGap="5px">
        <button mat-flat-button matStepperPrevious>Back</button>
        <button mat-flat-button (click)="stepper.reset()">Reset</button>
        <button mat-flat-button>Confirm</button>
      </div>
    </form>
  </mat-step>
</mat-vertical-stepper>

问题截图：

【问题讨论】：

标签： angular-material angular-flex-layout angular-material-stepper

【解决方案1】：

每一步都有不同的宽度，因此您看到的结果是预期的。当您将垂直堆叠的元素水平居中时，较宽的元素将出现在较窄的元素之外。您想要的是使整个步进器居中，并使步骤左对齐：

<div fxLayoutAlign="center center" fxLayout="column">

  <mat-vertical-stepper [linear]="true" #stepper>
    ...
  </mat-vertical-stepper>

</div>

StackBlitz

【讨论】：