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;。它将文本也推到中间。

Example

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

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

1 个答案: