image - 将中心对齐到表格单元格中图像的中间？

Question

我有这个 HTML：

<td>
    <ol start="4">
        <li>
            <div style="float:left;">some text</div>
            <div style="float:right;">
                <img style="vertical-align:middle;" src="pic.png" />
            </div>
            <div style="clear:both;"></div>
        </li>
    </ol>
</td>

我尝试了很多东西，包括vertical-align:middle 将文本对齐到图像的中间或相反，没有任何改变结果。到目前为止，图像的顶部与文本的顶部对齐。

怎么了？

谢谢！

Answer 1

将您的“一些文本” div 放在 pic div 中，将其设置为display:inline不会断行，然后添加vertical-align:middle，如下所示：

<table><tr>
<td>
    <ol start="4">
        <li>

            <div style="float:right;">
                <div style="display:inline;vertical-align:middle;">some text</div>
                <img style="vertical-align:middle;" src="pic.png" />
            </div>
            <div style="clear:both;"></div>
        </li>
    </ol>
</td>
</tr></table>

工作小提琴

更新：
为了能够vertical-align:middle在几行上做<br>，正如OP在评论中指出的那样，将“一些文本”div的显示更改为inline-table而不是just inline，请参阅工作jsFiddle