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をpicdiv内に配置し、線が切れないように設定して、次のよう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>

ワーキングフィドル

更新：コメントで指摘されているように、で区切られた複数の行で
実行できるようにするには、「テキスト」divの表示を単にではなくに変更します。jsFiddleの動作を参照してください。vertical-align:middle<br>inline-tableinline

于 2012-10-01T11:18:04.790 に答える