文本在div中与具有表格单元格显示属性的图像对齐

Question

我想将文本放在div容器的顶部，但图像阻止了这一点。我可能有评论使用div可能会吗？

这是css，html，typescript代码：

<div *ngFor="let sh of items" style="border: 1px solid; width: 100%; display:table; text-align: center;">
          <div>
            <div style=" width: 20%; display:table-cell">
                <span>{{sh.product.description}}</span>
            </div>
            <div style=" width: 20%; display:table-cell">{{sh.product.price}}</div>
            <div style=" width: 20%; display:table-cell">{{sh.count}}</div>
            <div style=" width: 20%; display:table-cell">{{sh.count * sh.product.price}}</div>
            <div style=" width: 20%; display:table-cell">
              <img src={{sh.product.picture}} style="height: 100%;"/>
            </div>
          </div>
        </div>

这是输出：

Answer 1

将vertical-align: top;设置为您的div

<div *ngFor="let sh of items" style="border: 1px solid; width: 100%; display:table; text-align: center;">
          <div>
            <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 style=" width: 20%; display:table-cell;vertical-align: top;">{{sh.count}}</div>
            <div style=" width: 20%; display:table-cell;vertical-align: top;">{{sh.count * sh.product.price}}</div>
            <div style=" width: 20%; display:table-cell;vertical-align: top;">
              <img src={{sh.product.picture}} style="height: 100%;"/>
            </div>
          </div>
        </div>