垂直对齐不起作用

Question

I know it's quite annoying, seems that vertical-align in CSS is common pitfall but I really need your help.

I want the text to be always be in "middle" vertical position left to the image (image test.gif has different dimensions)

I have such structure of html elements (unfortunately I can't change it due to system restrictions)

<div class="wrapper">
    <div class="logo"> 
        <img alt="some text" src="http://localhost/test.gif">
    </div> 
    <div  class="source">some text</div>
</div>

CSS:

.wrapper {clear: both;}
.logo {float: left;}
.source { float: left;line-height: 16px;}

Spent 1.5 hours and no luck. Tried to apply vertical align to different elements with different positioning, etc...Please help!

Answer 1

A common issue but is explained well here: http://phrogz.net/css/vertical-align/

Key Points

Specify the parent container as position:relative or position:absolute

Specify a fixed height on the child container.

Set position:absolute and top:50% on the child container to move the top down to the middle of the parent.

Set margin-top:-yy where yy is half the height of the child container to offset the item up.

<style type="text/css">
    #myoutercontainer { position:relative }
    #myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>

...

<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>

Answer 2

If you don't need to support IE7, try this:

.wrapper { display: table; }
.logo { display: table-cell; }
.source { display: table-cell; vertical-align: middle; }

Basically, tables give you the option to vertically align to the middle, and by making your div s act like a table, we can mimic that option.