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

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

对于一位数，数字居中很好，对于两位数，居中是关闭的

我想当它是一个两位数的时候，我可以做一些事情，比如左边距：-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>

1

不居中：

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

10

有什么想法吗

---

谢谢

尝试像这样使用flexbox：

.calendar span {
    display: flex;
    align-items: center;
    justify-content: center;
}

---

实际上，字体仅位于中间位置。如果你选择了文本，你就会知道。否则，如下面所示更改HTML。现在你会感觉到它在中心

<div class="calendar"><span class="single-digit">2</span></div>
 <div class="calendar"><span class="double-digit">28</span></div>

2
28

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

对于可变宽度字体，罗马数字0、2到9几乎都是相同的宽度，因此像“27”或“30”这样的两位数对左边的空间或多或少与右边的空间相同

但是，数字“1”是不对称的，“1”的右边缘有稍多的空白，因为“钩子”突出到字符面的左上角

在排版程序中，将使用紧排规则来实现相邻字符之间更好的视觉对齐，但web浏览器对紧排的支持充其量是有限的

每当文本中有“1”时，该修复需要手动调整字符对，例如，用于调整“1”、“10”、“11”、“19”、“21”、“31”的CSS规则

对于带有“1”的字符对，可以尝试使用较小的负值调整

字母间距

，这样可以改善外观

当然，调整在很大程度上取决于浏览器使用的字体，除非您指定嵌入字体，否则您将无法对其进行控制

您的HTML/CSS基本上是尽可能好的，您只是看到了当前浏览器的审美极限

参考资料：

---

jsFiddle：很有趣，从没听说过flexbox。不幸的是，在这个例子中它不起作用：@Tom它看起来在这里居中：也许1在甩你。试着用00而不是10。我可以在页面上使用PHP，这样我就可以检测数字中是否有“1”。如果我这样做，我能不能尽可能接近它？使用PHP，您可以根据需要为“21”和“31”的日历单元格分配CSS规则，例如，

kern-21-31

，CSS规则将具有一些特定的

字母间距

值，您必须手动确定这些值才能获得令人满意的视觉布局。作为第一个猜测，您需要“1”的规则，任何带前导“1”的数字对，任何带试用“1”的数字对，可能还有“11”的特定规则，因此总共需要四条规则。对于现代日历来说，只有31位数字对，所以这个问题是可以解决的。我最后使用了一个固定宽度的Google字体，在calendar元素中有一个表，每个数字有一列通过PHP分解出来。过度杀戮，但一切都很好。很高兴听到你是如何解决问题的，有时过度杀戮是必要的，以获得正确的细节！