css - 同じベースラインの Image Div と Text Div を含む CSS

Question

画像用の Div とテキスト用の Div を同じベースラインに配置したいと思います。以下は私のサンプルコードと JSFiddle です。

http://jsfiddle.net/xLrf7pyt/

<div class="wrap">
    <div class="img">
        <img src="http://www.cssportal.com/images/cssportal.png" />
    </div>
    <div class="txt">
        This is text.
    </div>
</div>

<style>
    .wrap { width: 500px;}
    .img { float: left; }
    .txt { }
</style>

============更新================

本来、画像 (左上隅のロゴ) とテキスト (右上のナビゲーション) の間には、画像ロゴと同じベースラインを持つ空白スペースが必要です。

Answer 1

float要素から を削除し.img、代わりに と の両方.imgをに設定.txtしdisplay: inlineます。

.img, .txt { 
    display: inline;
}

次に、次のように設定し.txtます。vertical-alignbaseline

.txt {
    vertical-align: baseline;
}

JSFiddle デモ。