Div與圖像垂直對齊

Question

我知道這已被問了很多很多次，但我仍然無法完成自己想要的東西。我看過各種網站尋求幫助，如Here和Here以及使用顯示錶垂直對齊，行高度等

這裏就是我試圖完成（我知道我可能要添加更多divs）。文本並不總是恆定的，所以我不能只是設置填充並完成它，因爲紅色和藍色的文本可能會改變長度。

下面是一個簡單的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和font-size: 0粘合在一起，如this demo fiddle中所示。

標記（不變）：

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