我想在 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>
这是输出:
最佳答案
设置 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>
关于css - div 中的文本与具有表格单元格显示属性的图像对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50187434/