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

尝试使用这样的flexbox：

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

Answer 2

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

对于可变宽度字体，罗马数字0,2到9几乎都是相同的宽度，因此两位数对的左边空格如＆＃34; 27＆＃34;或＆＃34; 30＆＃34;将与右边的空间大致相同。

然而，数字＆＃34; 1＆＃34;是不对称的，并且在＆＃34; 1＆＃34;的右边缘有更多的空白区域。由于＆＃34;钩子＆＃34;突然出现在角色脸的左上方。

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

修复需要在字符对的基础上进行手动调整，只要有＆＃34; 1＆＃34;在文本中，例如，CSS规则用于调整＆＃34; 1＆＃34;，＆＃34; 10＆＃34;，＆＃34; 11＆＃34;，...＆＃34; 19＆＃34; ，＆＃34; 21＆＃34;，＆＃34; 31＆＃34;。

对于带有＆＃34; 1＆＃34;的字符对，您可以尝试使用较小的负值调整letter-spacing，这可以改善外观。

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

您的HTML / CSS基本上是可以的，您只是看到了当前浏览器的美学限制。

<强>参考：

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

Answer 3

实际上字体只在中心位置。如果您选择了您可以了解的文本。否则，如下所示更改HTML。现在你会感觉它在中心。

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

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

3 个答案: