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

brooklynsweb 发表于 Dev

布鲁克林网

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

尝试解决的问题：

尝试的代码：

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

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

我的问题本质上是是否继续使用填充/边距hacks，还是有更多的“合法”解决方案。我问这个问题是关于响应快速的布局，然后统一布局没有问题。

提前致谢。

致富

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

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

具体来说，我想分享我发现的这个交互式文本裁剪工具，该工具有助于为此目的创建SASS mixin。

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。