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 混入。

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

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