html - 覆盖表格单元格内的 img 垂直对齐(Chrome)

Question

我需要能够为定义了垂直对齐的 td 标签内的图像覆盖垂直对齐。我试着给图像垂直对齐:中间，虽然这在 ff 中有效，但图像仍然低于 chrome 中的线。html 是通过 bbcode 编辑器提供的。

<table>
<tr>
    <td style="vertical-align: top">
        The text in table cell needs to align to top
        <br/>
        <br/>            

        image should vertically center relative to line <img src="https://jsfiddle.net/img/logo.png"/>
    </td>
</tr>

td {
    border: 1px solid blue;
    height: 200px;
}
td img {
    vertical-align: middle;
}

fiddle

适用于 firefox，但不适用于 chrome。

Answer 1

td 的中间垂直对齐将解决您的问题:

<td style="vertical-align: middle">

https://jsfiddle.net/6okr7ayy/7/

---

"vertical-align: top" cannot be changed or removed (its used by bbcode editors for various purposes)

然后尝试用 !important 在 CSS 中覆盖它

td {
    vertical-align: middle !important;
}