css - 将文本与左侧的 float 图像垂直对齐

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;}

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

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

提前致谢。

Answer 1

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

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

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

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

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