css - Div 画像との垂直方向の配置

Question

これまで何度も尋ねられてきたことは知っていますが、自分でやりたいことをまだ達成できていません。HereやHereなどのさまざまなWebサイトを調べたり、垂直方向の配置、行の高さなどでdisplay-tableを使用したりしました。

これが私が達成しようとしていることです（おそらくさらに 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

フローティング要素を使用しないでください。代わりに、このデモ fiddleに示すように、インライン要素 (スタイルを使用できる要素) をand とvertical-align一緒に使用してください。white-space: nowrapfont-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;
}