html - 在 div 元素中居中非固定宽度的数字

Question

我正在通过 CSS 模拟纸质日历。我在带有文本阴影的框中显示数字。

对于单个数字，数字居中很好，对于两位数，居中关闭。

我想我可以在它是两位数时陷入困境并执行类似 margin-left:-25px 的操作，但必须有更简洁的方法。

.calendar
{
    font-family:arial,sans-serif;   
    margin:0 auto;
    width:400px;
    height:400px;
    background-color:#ffffff;
    border:1px solid #000000;
    text-align:center;
    -webkit-box-shadow:10px 10px 0px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow:10px 10px 0px 0px rgba(0, 0, 0, 0.75);
    box-shadow:10px 10px 0px 0px rgba(0, 0, 0, 0.75);
    line-height:400px;
}
.single-digit
{
    font-size:22em;
}
.double-digit
{
    font-size:20em;
}

中心很好:

<div class="calendar"><span class="single-digit">1</span></div>

不居中:

<div class="calendar"><span class="double-digit">10</span></div>

有什么想法吗？

谢谢!

Answer 1

我认为问题更多地与居中的视觉感知有关，几乎是一种错觉。

对于可变宽度字体，罗马数字 0、2 到 9 几乎都是相同的宽度，因此像“27”或“30”这样的双位数左边的空格将大致相同作为右边的空间。

但是，数字“1”是不对称的，由于字符面部左上角突出的“钩子(Hook)”，“1”的右边缘有稍多的空白。

在排版程序中，字距调整规则可用于在相邻字符之间实现更好的视觉对齐，但网络浏览器最多只能有限地支持字距调整。

当文本中出现“1”时，修复将需要在字符对的基础上进行手动调整，例如，用于调整“1”、“10”、“11”、...“19 的 CSS 规则”、“21”、“31”。

对于包含“1”的字符对，您可以尝试将 letter-spacing 调整为较小的负值，这样可以改善外观。

当然，调整在很大程度上取决于浏览器使用的字体，除非您指定嵌入字体，否则您几乎无法控制它。

您的 HTML/CSS 基本上是最好的，您只是看到了当前浏览器的审美限制。

引用:

http://www.w3.org/TR/css3-fonts/#font-kerning-prop