如何将中间的文本与同一 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>

网址：

<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 文件