table-cell布局的div中图片遮挡文本，如何将文本置于容器顶部？

首先咱们先定位问题根源：你用了display:table和display:table-cell布局，而table-cell默认的vertical-align属性值是middle——这就会让单元格里的文本跟着图片的高度居中，看起来像是被图片"挤"到中间，没法贴在容器顶部。

下面给你几个可行的调整方案：

方案1：给table-cell设置vertical-align: top #

直接修改你的内联样式，给包含文本的table-cell加上vertical-align: top，这是最直接的办法：

<div *ngFor="let sh of items" style="border: 1px solid; width: 100%; display:table; text-align: center;">
  <div style="width: 20%; display:table-cell; vertical-align: top;">
    <span>{{sh.product.description}}</span>
  </div>
  <div style="width: 20%; display:table-cell; vertical-align: top;">{{sh.product.price}}</div>
  <!-- 其他包含图片的单元格 -->
</div>

这样不管旁边单元格里的图片有多高，文本都会牢牢贴在单元格的顶部。

方案2：改用Flexbox布局替代Table布局 #

如果你的场景允许，Flexbox比table布局更灵活，也更容易控制对齐方式：

<div *ngFor="let sh of items" style="border: 1px solid; width: 100%; display:flex; text-align: center;">
  <div style="width: 20%; align-self: flex-start;">
    <span>{{sh.product.description}}</span>
  </div>
  <div style="width: 20%; align-self: flex-start;">{{sh.product.price}}</div>
  <!-- 图片所在的容器 -->
  <div style="width: 60%;">
    <img src="你的图片地址" alt="产品图">
  </div>
</div>

align-self: flex-start会让当前元素在交叉轴（垂直方向）上对齐容器顶部，完美解决你的问题，而且Flexbox在响应式场景下表现更好。

方案3：分离文本和图片的容器层级（备选） #

如果不想改布局方式，也可以给文本单独加一个容器，通过样式强制对齐顶部：

<div *ngFor="let sh of items" style="border: 1px solid; width: 100%; display:table; text-align: center;">
  <div style="width: 20%; display:table-cell;">
    <div style="position: relative; top: 0;">{{sh.product.description}}</div>
  </div>
  <!-- 其他单元格 -->
</div>

不过这个方案不如前两个彻底，优先推荐方案1或2。

另外提醒一下：尽量避免大量内联样式，把样式抽到组件的CSS文件里，维护起来会方便很多，比如：

.item-container {
  border: 1px solid;
  width: 100%;
  display: table;
  text-align: center;
}
.item-cell {
  width: 20%;
  display: table-cell;
  vertical-align: top;
}

然后HTML里直接用类名：

<div *ngFor="let sh of items" class="item-container">
  <div class="item-cell">{{sh.product.description}}</div>
  <div class="item-cell">{{sh.product.price}}</div>
</div>

内容的提问来源于stack exchange，提问作者Houssam Badri