将中心对齐到表格单元格中图像的中间？答案

【问题标题】：Aligning center to the middle of an image in a table cell?将中心对齐到表格单元格中图像的中间？
【发布时间】：2012-10-01 19:50:03
【问题描述】：

我有这个 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 将文本对齐到图像的中间或相反，没有任何改变结果。到目前为止，图像的顶部与文本的顶部对齐。

怎么了？

谢谢！

【问题讨论】：

标签： image alignment

【解决方案1】：

将您的“一些文本”div 放入图片 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>

工作fiddle

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

【讨论】：

这进入了正确的方向，但现在列表中的 4. 仍处于旧位置。它也需要下降一点。
您正在评论我在您粘贴的代码中没有看到的问题，请尝试为您所描述的问题制作一个jsfiddle.net 测试用例，以便我们为您提供更多帮助。
你说得对，请看这里：jsfiddle.net/a4fGa。文本需要位于图像的左侧。忘记我在第一条评论中所说的话。
好的，您发布的 jsfiddle 有什么问题？你想改变什么？
一行文字在图片上方，另一行在图片左侧。我希望两条线都在图像的左侧。