Centrer le texte dans tous les navigateurs supportant avec css

Je cet extrait: vue here modifier here Centrer le texte dans tous les navigateurs supportant avec css

Comment puis-je rendre le séjour « x » au milieu du cercle sur tous les navigateurs supportant (au moins de firefox3 + et chrome)

Snippet:

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title>Backbone: Tody</title> 

    <style> 
    .delete { 
     -moz-border-radius: .75em; 
     -webkit-border-radius: .75em; 
     width: 1.4em; 
     height: 1.4em; 
     text-align: center; 
     display: inline-block; 
     line-height: 1.4em; 
     display:inline-block 
     vertical-align:middle 
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
     font-size: 14px; 
     font-weight: bold; 
     color: white; 
     background-color: gray; 
     cursor: pointer; 
    } 
    .delete:before { 
     content: "\2715"; 
     /* content: "\00D7"; */ 
    } 
    .delete:hover { 
     background-color: red; 
    } 
    </style> 

</head> 
<body> 

<div class="delete"></div> 

</body> 
</html>

Source

2010-11-14 clyfe

n'est-ce pas déjà au milieu? –

cette version est ok sur FF mais pas sur chrome, il doit y avoir quelque chose qui fonctionne sur les deux – clyfe

J'ai eu ce travail en fixant une marge comme celui-ci et en faisant l'espace intérieur (boîte + padding) la même taille que la police. http://jsbin.com/unera3/5/edit

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title>Backbone: Tody</title> 

    <style> 
    .delete { 
     -moz-border-radius: .75em; 
     -webkit-border-radius: .75em; 
     width: 1.4em; 
     height: 1.4em; 
     text-align: center; 
     line-height: 1.4em; 
     vertical-align:middle 
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
     font-size: 14px; 
     font-weight: bold; 
     color: white; 
     background-color: gray; 
     cursor: pointer; 
    } 
    .delete:before { 
     content: "\2715"; 
     /* content: "\00D7"; */ 
    } 
    .delete:hover { 
     background-color: red; 
    } 
    </style> 

</head> 
<body> 

<div class="delete"></div> 

</body> 
</html>

Source

2010-11-14 20:12:20 clyfe

Si vous voulez qu'il soit pixellisés à travers les navigateurs, votre meilleur pari est probablement d'utiliser une image - positionnement x dépendra de la taille des polices par défaut dans les différents navigateurs.

Cela dit, je dirais qu'il est assez proche dans FF4b et Chrome 7 sur OS X ...

Source

2010-11-14 19:43:57 alxndr

ceci est la plupart du temps une expérience – clyfe

Centrer le texte dans tous les navigateurs supportant avec css

Répondre

Questions connexes