如何在同一HTML表单元格中与图像在中间垂直对齐文本

Question

这是输出屏幕截图

我正在努力垂直将文本与它们共享的同一HTML单元格中的图像对齐。我正在共享我创建的Test 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文件