css - 使用 css 居中跨度文本，两位数问题

Question

好吧，这是一个很奇怪的问题。

我这辈子都不能把这个跨度放在 div 中。所以我把它定位了。

但是，我想要的是将蓝色数字准确地置于 div 的中心。问题是，当数字变为 10 时，它会向右移动一点点。有一个 Stacker 同事帮我处理 js，现在只需要一些关于 css 内对齐的帮助。

我不确定您是否可以绝对居中一个以单个数字为中心的计数器，并且两位数也居中。

没有意义？

K链接:Test Page

CSS(我知道它不以 span 元素 timer 为中心，但它需要居中。

无法让 Stack 正确显示代码，请检查链接来源

关于将数字居中的任何建议，以便它们处于死水平中心。并且当数字跳到 10 时它不会向右或向左移动？

Answer 1

只需从“.timer”元素中删除“top”、“left”和“position”属性，并将“text-align: center”添加到“.content”元素。CSS:

.content {
    height:140px; 
    width:240px; 
    border-color: #51505b; 
    border-style:solid; 
    border-width:1px; 
    left:500px;
    position:relative;
    -moz-border-radius: 6px; -webkit-border-radius: 6px;
    text-align: center;
}
.timer {
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size:5em;
    color: #398fe8;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.msg {
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color: #51505b;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

HTML:

<div class="content">
    <span class="timer">10</span>
    <br>
    <span class="msg"></span>
</div>