Question

I have a div with <img> and <a> in it.
But I have problem to align them vertically middle. I have tried to use floats, absolute positioning and other stuff but nothing has effect.

<div id="hoverDiv">
                <img alt="" width="32px" height="32px" src="http://www.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211776868.png" />
                <a href="#">TestAccount </a>
                <div class="showme">
                    <ul id="menuAccountItemList">
                        <li>...
                    </ul>
                </div>
            </div>

Answer 1

img {
   vertical-align:middle;
}​

Here’s a jsFiddle example (border added to show alignment).