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