覆盖表格单元格内的 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" 不能更改或删除（它被 bbcode 编辑器用于各种目的）

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

td {
    vertical-align: middle !important;
}

Answer 2

将 td 中的文本和图像包装成一个段落。现在您的代码也可以在 Chrome 上运行：

<table>
 <tr>
  <td>
    <p>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"/></p>
  </td>
 </tr>
</table>

CSS 保持不变：

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

See the fiddle.

Answer 3

在你的 CSS 中用 !important 覆盖标准的垂直对齐属性：

更新

在您的文本中添加一个元素并垂直对齐您的图像

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

<table>
    <tr>
        <td style="vertical-align: top">
            The text in table cell needs to align to top The text in table cell needs to align to top The text in table cell needs to align to top
            <br/>
            <br/>            
            
            <span>image should vertically center relative to line</span> <img src="https://jsfiddle.net/img/logo.png"/>
        </td>
    </tr>
</table>