居中对齐图像旁边的td中的文本

Question

这就是文本当前的样子

HTML：

<td style="vertical-align:middle;">
   <img src="~/Images/Cancel.png" style="width:80px;height:80px" id="btnCancel" />
   <span style="color:White;font-size:27px;font-weight:bold;">CANCEL</span>
</td>

如何垂直对齐图像旁边的文字，使其位于中间？

Answer 1

您可以从表格单元格中删除vertical-align:middle;，并将该CSS声明应用于<img>和span>元素，如下所示：

<td>
    <img src="http://placehold.it/100" style="width:80px;height:80px;vertical-align:middle;" id="btnCancel" />
    <span style="color:black;font-size:27px;font-weight:bold;vertical-align:middle;">CANCEL</span>
</td>

<强> WORKING DEMO

这是因为默认情况下内联元素本身在基线中对齐。

Answer 2

尝试在css中提供float:left：

<img src="~/Images/Cancel.png" style="width:80px;height:80px; float:left" id="btnCancel" />
<span style="color:White;font-size:27px;font-weight:bold; float:left margin:5px 0 0 5px;">CANCEL</span>

Answer 3

如果您同时进行图像和跨度显示：内联块，您将能够使用vertical-align：middle。

<td style="vertical-align:middle;">
   <img style="display: inline-block; vertical-align:middle; width:80px; height:80px" src="~/Images/Cancel.png" id="btnCancel" />
   <span style="display: inline-block; vertical-align:middle; color: White; font-size: 27px; font-weight: bold;">CANCEL</span>
</td>

Answer 4

<td style="vertical-align:middle;">
   <img src="~/Images/Cancel.png" style="width:80px;height:80px;float:left" id="btnCancel" />
   <span style="color:White;font-size:27px;font-weight:bold;float:left; padding:24px 0 0 0">CANCEL</span>
</td>