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

Question

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

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

试图解决的问题：

尝试过的代码：

.mi{float:left; width:150px;height:200px;padding-right:10px;/*margin-top:3px;*/}
.mt{float:left; width:400px;margin:0;}

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

我的问题主要在于是否继续使用填充/边距黑客还是有更多合法的＆＃39;解。我问这个关于构建响应的布局，然后没有统一布局的问题。

提前致谢。

Answer 1

而不是float使用display:table;布局进行完美的内嵌放置和垂直对齐。

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

Updated JSFiddle

.wrapper {
    display: table;
}

.mi{width:200px;height:200px;display: table-cell;}
.mt{display: 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>

Answer 2

空间应该在那里，它通常来自行高，这是你需要的东西。如果您的字体大小为14px并且您将线条高度降低到11px，您会看到间隙将从顶部消失，但文本看起来会非常狭窄..

有时为了获得完美的像素，你必须像图片中的边距一样进行调整..

Answer 3

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

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

特别是，我想分享这个Interactive Text-Crop tool，我发现它有助于为此目的创建SASS mixin。

此工具的要点是从（font-size * line-height）中删除大写高度，然后除以2。但是，这简化了字体的结构方式。

实际上-没有“像素完美”的答案，因为当涉及到它时，字体的物理结构并不总是与它们的font-size以及相同字体大小的不同字体家族匹配仍然可以看起来更高或更短。