将文本垂直对齐到左侧的浮动图像

Posted 2023-03-05

【中文标题】将文本垂直对齐到左侧的浮动图像

【英文标题】：Vertical Align Text to a Floated Image that is on the Left

【发布时间】：2014-11-17 21:39:29

【问题描述】：

现在我知道发布了类似的问题，但我正在寻找像素完美的解决方案。

沙盒：http://jsfiddle.net/unqc4a0f/1/

试图解决的问题：

尝试的代码：

.mifloat:left; width:150px;height:200px;padding-right:10px;/*margin-top:3px;*/
.mtfloat:left; width:400px;margin:0;

过去，我使用填充/边距技巧将图像或文本对象向下推几个像素，以使它们在顶部边缘视觉上对齐。视觉上我的意思是我知道字体有大小和行高，但即使考虑到这一点，实际字体字符的高度也可能包含一些空间。您可以在上面的示例中看到这一点。我还 - 基于此处的其他线程 - 尝试使用 line-height，虽然这确实实现了像素完美对齐，但它破坏了整个段落的垂直行距。

我的问题本质上是继续使用填充/边距黑客还是有更“合法”的解决方案。我问这个关于构建响应式布局然后没有统一布局问题的问题。

提前致谢。

【问题讨论】：

我认为除了您目前正在进行的像素争吵之外，别无选择。

【参考方案1】：

意识到这是一个老问题，但是......

在 CSS 中，可以使用 ::before 元素为其添加一个负的 margin-top 值。

具体来说，我想分享这个 Interactive Text-Crop tool 我发现它有助于为此目的创建一个 SASS 混合。

此工具的要点是您从 (font-size * line-height) 中删除大写高度，然后除以 2。但这是对您的字体可能或可能不是结构的简化。

实际上 - 没有“像素完美”的答案，因为归根结底，字体的物理结构并不总是与其font-size 匹配，并且相同字体大小的不同字体系列仍然可以看起来更高或更短。

【参考方案2】：

使用display:table; 布局代替float 以获得完美的内联放置和垂直对齐。

它只需要你将它们包装在一个元素中......

Updated JSFiddle

.wrapper 
    display: table;


.miwidth:200px;height:200px;display: table-cell;
.mtdisplay: table-cell;vertical-align:middle;

<div class="wrapper">
    <img src="http://www.thehollywoodnews.com/wp-content/uploads/2839335-morgan_freeman_wallpaper_4_normal.jpg" class="mi">
    <p class="mt">Join me in San Diego at the Global Event for Data-Driven Engagement Marketers. DMA is doing great work to protect marketers around the world, come and hear from leading marketers how DMA is enabling them to NOT MARKET ALONE</p>
</div>

【讨论】：

嗨 LcSalazar，您的示例没有解决我的问题，文本没有将像素完美地对齐到图像的顶部。我在 chrome 上，这就是我 seeing

【参考方案3】：

空间应该在那里，它通常来自你需要的行高。如果你的字体大小是 14px 并且你将 linee-height 减少到 11px 你会看到间隙会从顶部消失，但是文本会看起来很狭窄..

有时要获得完美的像素，您必须像使用图像上的边距一样进行调整..