Выравнивание текста в 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>