spanning span txt en utilisant css, problème à deux chiffres

Question

Ok, c'est une question assez étrange.

Je ne peux pas pour la vie de moi centrer cette envergure dans le div. Alors je l'ai positionné. Cependant, ce que je veux, c'est centrer les nombres bleus exactement dans la div. Le problème est, quand les nombres changent à 10, il se déplace vers la droite un peu. Avait un collègue Stacker, m'aider avec le js, juste besoin d'aide avec l'alignement dans CSS maintenant.

Je ne sais pas si vous pouvez centrer un compteur centré sur un seul numéro et le numéro à deux chiffres est également centré.

Cela n'a pas de sens?

K lien: Test Page

Css (je sais que ce ne est pas centrée pour l'élément span minuterie mais il doit être centré

cant get Stack pour afficher correctement le code, s'il vous plaît vérifier la source du lien.

Toutes les suggestions sur le centrage des chiffres, de sorte qu'ils sont morts centre horizontal. et que lorsque le nombre passe à 10 il ne marche pas passer à droite ou à gauche?

Answer 1

retirer le positionnement absolu, ajouter text-align: center à la div, ajoutez une marge supérieure à la durée de centrer verticalement.

.content { 
    text-align: center; 
} 

.timer{ 
    position: static; 
} 

Vous n'avez pas besoin position: static mais je l'ai ajouté parce que vous aviez sur absolute sur votre page.

Answer 2

Supprimez simplement les propriétés "top", "left" et "position" de l'élément ".timer" et ajoutez "text-align: center" à l'élément ".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>