13

关于SO的第一个问题！

我试图“像素完美”水平对齐两行文本，每行都有不同的字体大小。

<style type="text/css">
    *   { font-family: sans-serif;}
    div { float: left;}
    h1  { font-size: 150px;  margin-bottom:-30px; }
</style>

        <div>
            <h1> B </h1>
            <h6> B-L.align </h6>
        </div>
        <div>
            <h1> L </h1>
            <h6> L.align </h6>
        </div>

示例：http: //jsfiddle.net/jgYBD/1/

如果您查看示例，您会注意到较大的字体具有更多的“？填充？” 比较小的字体。使它们错位几个像素。

我正在寻找一种方法或公式来完美地左对齐它们，而不是在左边距上使用试错法！

感谢所有想法，谢谢。

4

4 回答 4

3

您看到的不是填充，而是字体的某种“字距调整”。不是真的，但有点。最大的问题是每种字体甚至每个字母都不同。尝试更换

<h1>B</h1>

经过

<h1>J</h1>

现在空间小了很多！

这个空间取决于字体、大小和字母。所以，我认为你无法控制它

于 2013-02-06T18:06:42.353 回答
3

一个潜在的技巧：添加:first-letter { margin-left: -0.08em; }. 必须针对您的字体调整 em，但如果您愿意，您可以全局应用它。它确实会导致向左小幅移动，但您可以随意更改 H1 的字体大小并保持对齐。

请参阅您的 jsFiddle 的此更新。

但它并不能解决“J”问题，所以它可能对你来说是一个有争议的问题。

于 2013-05-30T19:32:37.573 回答
2

我知道你想要这个？：

h6 {
    float: left;
position: relative;
left: 11px;
}

示例：http: //jsfiddle.net/jgYBD/4/

于 2013-02-06T16:10:36.847 回答
1

试试这个

h6 { padding: 0 10px; }

于 2013-02-06T16:07:44.893 回答