html - 显示内联块不会在重要的步进器标题中保持对齐

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。在 Stackblitz 上查看这个 repro，这里是代码以防万一：

.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）。