显示内联块不会在物质步进器中保持对齐 header

Question

我在保持图像和包含文本的 div 正确对齐方面遇到了问题。

如果屏幕很大，所有元素都会正确对齐，但如果屏幕太小（例如手机大小的屏幕），图像会被向上推，如下所示：

这是想要的结果（比如大屏显示）

我的代码如下（HTML）：

      <ng-template matStepLabel>
        <img class="img-logo inline vertical-align" src="{{experience.logoPath}}"/>
        <div class="label-text inline vertical-align">
          <h6 class="inline no-margin">{{experience.type}} - {{experience.title}}</h6>
          <br />
          <span class="italic-text inline">
            <span [innerHTML]="experience.dateStart.replace('/', ' / ')"></span> - <span [innerHTML]="experience.dateEnd.replace('/', ' / ')"></span>
            <div class="spacer"></div>
            <span class="dot"></span>
            <div class="spacer"></div>
            <span [innerHTML]="this.getDuration(experience.dateStart, experience.dateEnd)"></span>
          </span>
        </div>
      </ng-template>

这是 CSS :

.mat-step-label.mat-step-label {
  text-overflow: inherit;
  white-space: normal;
}

.label-text {
  position: relative;
}

.img-logo {
  max-height: 40px;
  max-width: 40px;
  top: 0;
  vertical-align: bottom;
  padding-right: 6px;
}

.spacer {
  padding: 3px;
  display: inline;
}

.vertical-align {
  vertical-align: middle;
}

.inline {
  display: inline-block;
}

.no-margin {
  margin: 0;
}

.buffer {
  padding-top: 40px;
}

如何让徽标在小屏幕上保持对齐？

Answer 1

为此您必须使用 Flexbox。请参阅 this repro on Stackblitz，这里是以防万一的代码：

.html:

<ng-template matStepLabel>
  <div class="flex-container">
    <img src="https://picsum.photos/200/300" />
    <div>
      <div>
        qsdzefruh iuhsedqfiuohef sqedpifuhef zsqiedpoufhqszef piqsuedhfp
        iuhqsdiouyfh
      </div>
      <i>some date - some date - some date</i>
    </div>
  </div>
</ng-template>

.css:

img {
  width: 48px;
  height: 48px;
}

.flex-container{
  display: flex;
  align-items: center;
}

::ng-deep .mat-step-label.mat-step-label {
  text-overflow: inherit;
  white-space: normal;
}

请注意 .mat-step-label 似乎有一个最大高度，因此如果您的标签超过 3 或 4 行（我认为这不会发生），它会溢出并被部分隐藏，您的调用取决于您显示的内容。

真的希望它能有所帮助，因为我花了几个小时才发现我没有使用 ng-deep...如果您将 css 放在您的组件中，请不要忘记它.否则你可以把它放在主文件 style.scss 文件中使其成为全局文件（如果你这样做就不需要 ng-deep）。

显示内联块不会在物质步进器中保持对齐 header

display inline blocks do not remain aligned in matterial stepper header

html

css

angular-material

angular

angular-material-stepper