Question

我需要能够覆盖定义了垂直对齐的td标记内的图像的垂直对齐。我试图给图像vertical-align：middle，虽然这在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

在CSS中用！important覆盖标准vertical-align属性：

<强>更新

在文字中添加元素并垂直对齐图像

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>

Answer 2

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

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

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

“vertical-align：top”无法更改或删除（bbcode编辑器出于各种目的使用它）

然后尝试使用!important

在CSS中覆盖它

td {
    vertical-align: middle !important;
}

Answer 3

将文本和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

覆盖表格单元格内的img垂直对齐（Chrome）

3 个答案: