具有相同基线的 Image Div 和 Text Div 的 CSS答案

【问题标题】：CSS with Image Div and Text Div for the same baseline具有相同基线的 Image Div 和 Text Div 的 CSS
【发布时间】：2026-01-21 05:10:01
【问题描述】：

我想在同一基线放置一个用于图像的 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>

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

最初，图像（左上角的徽标）和文本（右上角的导航）之间应该有一些空白空间，并且与图像徽标具有相同的基线。

【问题讨论】：

标签： css baseline

【解决方案1】：

从.img 元素中删除float，并将.img 和.txt 都设置为display: inline：

.img, .txt { 
    display: inline;
}

然后将.txt 设置为具有vertical-align 的baseline：

.txt {
    vertical-align: baseline;
}

JSFiddle demo.

【讨论】：

感谢您的评论，它的工作原理。但是，当我更新时，我可能不得不使用 float 将图像和文本放置在确切的位置。如何在您的解决方案中使用浮点数。
@Jay 也许更好的解决方案是将.wrap 元素设置为display: table，width 为 100%，将.img 和.txt 元素设置为display: table-cell .然后将.txt 元素设置为将text-align 设置为right。
@Jay：通常有一种比浮动元素更容易定位的方法。
@JamesDonnelly 我用您的评论进行了测试，但它显示了两行。 jsfiddle.net/xLrf7pyt/3
@Jay 这是我在回答中链接的 JSFiddle 演示。

【解决方案2】：

使用 display:inline;

    .wrap { width: 500px;}
    .img { display:inline; }
    .txt { display:inline; }

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

【讨论】：