Question

I have this 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>

I tried lots of things including vertical-align:middle to either align the text to the middle of the image or the other way round, nothing changed the result. So far, the top of the image is aligned with the top of the text.

Whats wrong?

Thanks!

Answer 1

Put your “some text” div inside the pic div, set it to display:inline so it wont break line and just add the vertical-align:middle , like so:

<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>

Working fiddle

UPDATE:
To be able to do vertical-align:middle on several lines breaked by <br>, as OP noted in comments, change the display of “some text” div to inline-table instead of just inline, see working jsFiddle