Div与图像的垂直对齐

Question

我知道这已经被问过很多次了，但是我仍然无法独自完成自己想要的事情。 我看过各种网站以寻求帮助，例如“ 这里”和“ 这里” ，以及使用具有垂直对齐，行高等的显示表。

这是我要完成的工作（我知道我可能必须添加更多的div）。 文本并不总是恒定的，所以我不能只设置填充并完成填充，因为红色和蓝色的文本的长度可能会改变。

这是我目前拥有的简单jsFiddle： 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

你好亲密！ 只需将图像设置为display: block

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

Answer 2

您可以使用display: table和display: table-cell进行垂直对齐。

参见http://jsfiddle.net/d4DaV/3/

在IE6和IE7上不起作用，但从IE8开始

Answer 3

不要使用浮动元素。 相反，请使用内联元素（可以在其上使用vertical-align样式），该内联元素与white-space: nowrap粘合在一起white-space: nowrap和font-size: 0 ，如本演示小提琴所示。

标记（不变）：

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

样式表：

.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;
}