css - 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>