1

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

怎么了?

谢谢!

4

1 回答 1

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

于 2012-10-01T11:18:04.790 回答