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

Question

Here's the Output screenshot

我很难在它们共享的同一 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;。它也会将文本推到中心。

Example

此外，如果我是你，我也不会使用内联 CSS。将来可能会出现问题，请改用外部 CSS 文件