具有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-align的baseline:

.txt {
    vertical-align: baseline;
}

JSFiddle演示.