CSS simple: Texte ne sera pas centré sur un bouton

Dans 'A' Firefox montre au milieu, sur Chrome/IE il ne fonctionne pas:CSS simple: Texte ne sera pas centré sur un bouton

<button type="button" style="width:24px; text-align:center; vertical-align:middle">A</button>

Notez les points suivants a les mêmes résultats:

<button type="button" style="width:24px;">A</button>

Edit: semble maintenant être fixée dans Chrome 5.0

Source

2010-05-21 gbhall

Cela semble fonctionner ici: http://jsbin.com/ohecu/. Il peut ne pas sembler centré parce que 24px est plutôt petit. – Joel

Je sais, malheureusement, j'ai besoin de cette taille. Il y a encore de l'espace, cela fonctionne dans Firefox mais pas dans Chrome. – gbhall

Test cela dans Chrome, vous devez ajouter

padding: 0px;

Pour le CSS.

Source

2010-05-21 15:27:20 Tejs

IE installe son propre remplissage sur les boutons (merci Windows). Le formatage des boutons est embêtant car il prend en charge le formatage du système d'exploitation et du navigateur. C'est la même raison pour laquelle vous pouvez ajuster la taille des boutons 'ou style dans les navigateurs de Safari. Vous feriez bien de vous souvenir de toujours utiliser une réinitialisation CSS. – dclowd9901

Cela ne m'est pas venu à l'esprit. Merci, a fonctionné comme prévu pour Chrome! Bien que malheureusement, Firefox soit maintenant un peu excentré. – gbhall

En fait, si quelqu'un d'autre a ce problème, voici le correctif qui fonctionne sur IE, FF et Chrome:

padding:0 3px 0 3px; /* Purely for IE, however doesn't affect Firefox. Chrome requires 0 */

-webkit-padding-start: 0; – gbhall

Qu'en est-:

<input type="button" style="width:24px;" value="A"/>

Source

2010-05-21 15:25:46 Gabe

usualy, votre code devrait fonctionner ...

Mais voici une façon de centrer le texte en css:

.text 
{ 
    margin-left: auto; 
    margin-right: auto; 
}

Cela a prouvé être à l'épreuve des balles chaque fois que je me veux centrer le texte avec css.

Source

2010-05-21 15:28:58 Zwik

Le problème est que les boutons sont affichés différemment d'un navigateur à l'autre. Dans Firefox, 24px est suffisant pour couvrir le remplissage par défaut et l'espace autorisé pour votre personnage "A" et le centrer. Dans IE et Chrome, ce n'est pas le cas. La valeur par défaut est donc la valeur minimale nécessaire pour couvrir le remplissage gauche et le texte sans le couper, mais sans ajouter de largeur supplémentaire au bouton.

Vous pouvez augmenter la largeur ou, comme suggéré ci-dessus, modifier le remplissage. Si vous supprimez la largeur explicite, cela devrait fonctionner aussi.

Source

2010-05-21 15:31:39 TheQ

En tant que méthode de force plus brute que j'ai trouvé travaillé pour moi:

d'abord envelopper le texte à l'intérieur du bouton dans une période, puis appliquer cette css à cette période

var spanStyle = { 
     position: "absolute", 
     top: "50%", 
     left: "50%", 
     transform: "translate(-50%, -50%)" 
    }

* ci-dessus la configuration pour le style en ligne

Source

2016-11-30 03:36:51 RadDog25

CSS simple: Texte ne sera pas centré sur un bouton

Répondre

Questions connexes