Div与图像的垂直对齐

Question

I know this has been asked many, many times before, but I still am not able to accomplish what I want on my own. I have looked at various websites for help such as Here and Here as well as using display-table with vertical align, line height etc.

Here is what I am trying to accomplish ( I know I will probably have to add more divs ). The text isn't always constant, so I can't just set the padding and be done with it as the text in red and blue may change in length.

Here is a simple jsFiddle for what I currently have: http://jsfiddle.net/gP2U8/9/

<div class="container">
    <div class="left">
        <img src="http://www.gadgets-for-men.co.uk/wp-content/themes/revolution_tech-20/images/rss-icon-50.gif" />
        <span>This is text below the image</span>
    </div>
    <div class="right">
        <span>This is text to the right of the image, will usualy contain a lot of text. This is text to the right of the image, will usualy contain a lot of text. This is text to the right of the image, will usualy contain a lot of text. This is text to the right of the image, will usualy contain a lot of text.</span>
    </div>
</div>


.container{
    border: 1px solid black;
    width: 400px;
    height: auto;
    position: relative;
    display: inline-block;
}

.left{
    float:left;
    width: 25%;
}

.right{
     float: right;
    width: 75%;
}

.left, .right{
     margin-top: 25px;
    margin-bottom: 25px;
}

Answer 1

You were so close! Just set the image to display: block

http://jsfiddle.net/d4DaV/1/

Answer 2

you can use display: table and display: table-cell for vertical alignment.

See http://jsfiddle.net/d4DaV/3/

doesn't work on IE6 and IE7 but from IE8 upward

Answer 3

Don't use floating elements. Instead, use inline elements (on which you can use the vertical-align style), glued together with white-space: nowrap and font-size: 0 , as shown in this demo fiddle .

Markup (unchanged):

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

Style sheet:

.container{
    border: 1px solid black;
    width: 400px;
    padding: 25px 0;
    white-space: nowrap;
    font-size: 0;
}
.left, .right {
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
    font-size: 12pt;
}
.left{
    width: 25%;
}
.right{
    width: 75%;
}
img {
    display: block;
}