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

将你的“some text”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>

工作fiddle

<强>更新：
要在vertical-align:middle分隔的几行上执行<br>，正如OP在评论中指出的那样，将“some text”div的显示更改为inline-table，而不仅仅是inline ，见工作jsFiddle

将中心对齐表格单元格中的图像？

1 个答案: