具有相同基线的 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>

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

最初，图像(左上角的 Logo )和文本(右上角的导航)之间应该有一些空白，具有与图像 Logo 相同的基线。

Answer 1

从 .img 元素中删除 float 并将 .img 和 .txt 设置为 显示:内联:

.img, .txt { 
    display: inline;
}

然后将 .txt 设置为 vertical-align 为 baseline:

.txt {
    vertical-align: baseline;
}

JSFiddle demo .