CSSを使用したセンタリングスパンtxt、二桁の問題

Question

これはかなり奇妙な質問です。

私の人生にとっては、このスパンをdiv内にセンタリングすることはできません。 私はそれを配置しました。

しかし、私が望むのは、青い数字をdiv内に正確に配置することです。問題は、数字が10に変わると、それはちょっと右にシフトします。 jssを手助けしてくれた仲間のスタッカーがいれば、今すぐcss内での位置づけの助けが必要です。

1つの数字を中心とするカウンターを絶対に中央に置くことができないかどうかは分かりません。また、2桁の数字も中央に配置されていますか。

意味がありませんか？

Kリンク：Test Page

のCss（私はそのspan要素のために中央にないタイマーを知っているが、それは中心にする必要が

カントは、スタックがコードを正しく表示するために取得するには、リンクのソースを確認してください

彼らは死んで水平方向の中心になるように、数字を中心に上の任意の提案。その数は10にジャンプするとき、それは右にシフトするか左does notのこと？

Answer 1

絶対位置を削除し、DIVにtext-align: centerを追加し、垂直方向にそれを中心にスパンに上マージンを追加します。

.content { 
    text-align: center; 
} 

.timer{ 
    position: static; 
} 

あなたはposition: staticは必要ありませんが、あなたのページにabsoluteにそれを持っていたので、私はそれを追加しました。

Answer 2

".timer"要素から "top"、 "left"、 "position"プロパティを削除し、 ".content"要素に "text-align：center"を追加するだけです。 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>