2

我有一个非常烦人的问题，我想将图像的顶部与文本对齐，但字母实际上略低于行高。

我用经典电影创建了简单的示例来说明下面的问题。

HTML：

<img src="http://cf2.imgobject.com/t/p/w92/wcI3VMHw2TqtPVIkS4wpmxBJzWB.jpg" />
<p>Big</p>
<p>Admin</p>

CSS：

p, h4{
    font-size:1em;
    line-height:1em;
    vertical-align:top;
    margin:0;
    padding:0;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}

img{
    float:left;
    width:46px;
}

输出（在 Chrome 中）：

正如您所看到的，当行高与图像顶部对齐时，文本本身不是。我已经尝试了所有垂直对齐选项，但没有修复。

为什么行高大于字体大小，即使它们都设置为相同的尺寸？如何解决这个问题？

4

1 回答 1

10

这通常与排版有关，而不是 CSS。有许多垂直指南会影响字体设计。我假设您希望上限高度与图像顶部相匹配。

我在这里将您的示例添加到 jsfiddle：http: //jsfiddle.net/ahXpH/1/并复制了它。如果放大，您可以看到“Big”中的“i”实际上比 B 高，而“g”超出了段落本身的范围。检查 Chrome 中的元素会发现line-heightandfont-size匹配。

为了解决这个问题，您必须调整margin-top并在视觉上对齐它。对于我的 jsfiddle 版本，这恰好margin-top: -8px;是font-family: "Trebuchet MS"and font-size:48px。( http://jsfiddle.net/ahXpH/4/ ) 但是，如果您删除“Trebuchet MS”并使用 Arial 的后备前端，您会看到它不再排列并且现在是图像上方的一个像素。

最终，我不确定是否有纯 CSS 解决方案。硬编码该值仅适用于一种字体，甚至可能因浏览器而异。

于 2012-09-13T20:42:59.160 回答