Как выровнять текст по центру по вертикали с изображением в той же ячейке таблицы HTML

Question

Вот скриншот вывода

Я пытаюсь выровнять текст по вертикали с изображением в той же ячейке HTML, что и они.Я делюсь более простой версией тестового HTML-файла, который я создал, но в прошлом я пробовал все из CSS и вложенных таблиц, но почему-то не мог заставить его работать.Оцените помощь.

CSS:

    <style>
        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 25%;
        }

        td, th {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }

        tr:nth-child(even) {
            background-color: #dddddd;
        }
    </style>

HTML:

<table>
    <tbody>
        <tr>
            <th>Col-1</th>
            <th>Col-2</th>
        </tr>
        <tr>
          <td><img src="Star.png" style="width:60px">  Static Text</td>
          <td>Static Text</td>
        </tr>
    </tbody>
 </table>

Answer 1

Это очень просто.Используйте vertical-align: middle; на изображении.Это также подтолкнет текст к центру.

Пример

Также на вашем месте я бы не использовал встроенный CSS.Это может вызвать проблемы в будущем, вместо этого используйте внешний файл CSS