Je veux aligner verticalement le texte dans la case de sélection

Votre meilleure option sera probablement d’ajuster le remplissage supérieur et de comparer les navigateurs. Ce n’est pas parfait, mais je pense que c’est aussi proche que possible.

 padding-top:4px; 

La quantité de remplissage dont vous avez besoin dépend de la taille de la police.

Astuce: Si votre police est définie en px , définissez également le remplissage en px . Si votre police est définie dans em , définissez également le remplissage dans em .

MODIFIER

Je pense que ce sont les options que vous avez, puisque l’alignement vertical n’est pas cohérent dans tous les navigateurs.

A. Supprimer l’atsortingbut de hauteur et laisser le navigateur le gérer. Cela fonctionne généralement le mieux pour moi.

    option 1 number 2  

B. Ajouter un remplissage supérieur pour pousser le texte. (Enfoncé la flèche dans certains navigateurs)

   option 1 number 2  

C. Vous pouvez augmenter la taille de la police pour essayer de faire correspondre la hauteur sélectionnée avec un peu mieux.

   option 1 number 2  

Je suis tombé sur cet ensemble de propriétés CSS qui semblent aligner verticalement le texte dans des éléments de sélection dimensionnés dans Firefox:

 select { box-sizing: content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; } 

Si quelque chose, cependant, cela pousse le texte encore plus loin dans IE8. Si je remets la propriété de taille de boîte à border-box, cela ne rend pas au moins IE8 pire (et FF applique toujours la propriété -moz-box-sizing). Ce serait bien de trouver une solution pour IE, mais je ne retiens pas mon souffle.

Edit: Nix this. Cela ne fonctionne pas après les tests. Pour tous ceux qui sont intéressés, le problème semble provenir des styles intégrés dans le fichier forms.css de FF affectant les éléments d’entrée et de sélection. La propriété en question est la hauteur de ligne: normal! Important . Il ne peut pas être remplacé. J’ai essayé. J’ai découvert que si je supprimais la propriété intégrée dans Firebug, j’obtiens un élément select avec un texte raisonnablement centré verticalement.

Ma solution consiste à append un padding-top pour select ciblé à firefox uniquement comme ceci

 // firefox vertical aligment of text @-moz-document url-prefix() { select { padding-top: 13px; } } 

J’ai rencontré ce problème exactement. Mes options de sélection étaient centrées verticalement dans webkit, mais ff les a mises par défaut en haut. Après avoir regardé autour de moi, je ne voulais pas vraiment créer un travail qui était compliqué et qui finalement n’a pas résolu mon problème.

Solution: Javascript

 if ($.browser.mozilla) { $('.styledSelect select').css( "padding-top","8px" ); } 

Cela résout très précisément votre problème. Le seul inconvénient ici est que j’utilise jQuery, et si vous n’utilisez pas déjà jQuery sur votre projet, vous ne voudrez peut-être pas inclure une bibliothèque js pour une fois.

Note: Je ne recommande pas de styliser quelque chose avec js à moins que ce soit absolument nécessaire. CSS devrait toujours être la solution principale pour le style – pensez à jQuery (dans cet exemple particulier) comme à l’axe nommé “Break en cas d’urgence”.

* UPDATE * Ceci est un ancien message et comme il semble que les gens font toujours référence à cette solution, je devrais indiquer (comme mentionné dans les commentaires) que depuis 1.9 cette fonctionnalité a été supprimée de jQuery. S’il vous plaît voir le projet Modernizr pour effectuer la détection des fonctionnalités au lieu de renifler le navigateur .

juste eu ce problème, mais pour les appareils mobiles, principalement firefox mobile . L’astuce pour moi était de définir une hauteur , un rembourrage , une hauteur de ligne et enfin une taille de boîte , tout sur l’élément select. N’utilisez pas vos exemples de numéros ici, mais à titre d’exemple:

 padding: 20px; height: 60px; line-height: 1; -webkit-box-sizing: padding-box; -moz-box-sizing: padding-box; box-sizing: padding-box; 

Jusqu’à présent, cela fonctionne très bien pour moi:

 line-height: 100%; 

J’ai essayé comme suit et cela a fonctionné pour moi:

 select { line-height:normal; padding:3px; } 

J’ai trouvé que le simple fait de régler la hauteur de ligne et la hauteur sur la même quantité de pixels produisait le résultat le plus cohérent. Par «plus cohérent», je veux dire parfaitement cohérent mais bien sûr, ce n’est pas 100% «pixel perfect» entre les navigateurs. De plus, j’ai trouvé que Firefox (v. 17.x) tendait le texte d’option vers la droite contre la flèche déroulante; J’ai atténué cela avec une petite quantité de padding-right définie sur l’élément OPTION uniquement. Ce paramètre n’affecte pas l’apparence d’IE 7-9.

Mon résultat:

 select, option { font-size:10px; height:19px; line-height: 19px; padding:0; margin:0; } option { padding-right:6px; /* Firefox */ } 

NOTE – Mon élément SELECT utilise une police plus petite, 10px. De toute évidence, vous devrez ajuster les proportions en fonction de votre contexte d’interface utilisateur spécifique.

Essayez de définir l’atsortingbut “line-height”

Comme ça:

 select{ height: 28px !important; line-height: 28px; } 

Voici quelques documents sur cet atsortingbut:

http://www.w3.org/wiki/CSS/Properties/line-height

http://www.w3schools.com/cssref/pr_dim_line-height.asp

J’avais l’habitude d’utiliser la height et la height line-height avec les mêmes valeurs, mais il s’est avéré incohérent à travers les interwebs. Mon approche actuelle consiste à mélanger cela avec un rembourrage comme celui-ci.

 select { font-size:14px; height:18px; line-height:18px; padding:5px 0; width:200px; text-align:center; } 

Vous pouvez également utiliser le padding pour la valeur horizontale au lieu de la width + text-align

J’ai eu le même problème et j’ai travaillé pendant des heures. J’ai finalement trouvé quelque chose qui fonctionne.

Fondamentalement, rien de ce que j’ai essayé n’a fonctionné dans toutes les situations jusqu’à ce que je positionne une div pour reproduire le texte de la première option sur la boîte de sélection et que la première option réelle soit vide. J’ai utilisé {pointeur-événements: aucun;} pour permettre aux utilisateurs de cliquer sur le div.

HTML

  
   option 1 option 2  
 Select an option 
 
 

CSS

 .custom-select{position:absolute; left:28px; top:10px; z-index:1; display:block; pointer-events:none;} 

J’ai trouvé que seulement l’ajout padding-top poussé vers le bas la boîte de la flèche déroulante grise sur la droite, ce qui était indésirable.

La méthode qui a fonctionné pour moi consistait à entrer dans l’inspecteur et à append progressivement un padding jusqu’à ce que le texte soit centré. Cela réduira également la taille de l’icône de la liste déroulante, mais elle sera également centrée pour ne pas gêner visuellement.

Cela a maintenant été corrigé dans Firefox Nightly et sera dans la prochaine version de Firefox.

S’il vous plaît voir ce bug pour plus d’informations https://bugzilla.mozilla.org/show_bug.cgi?id=610733

tu peux donner :

 select{ position:absolute; top:50%; transform: translateY(-50%); } 

et pour parent il faut donner la position: relative. ça va marcher.

La solution générale la plus proche que je connaisse utilise la propriété box-align, comme décrit ici . L’exemple de travail est ici (je ne peux le tester que sur Chrome, et je pense qu’il a également l’équivalent pour les autres navigateurs).

CSS:

 select{ display:-webkit-box; display:-moz-box; display:box; height: 30px;; } select:nth-child(1){ -webkit-box-align:start; -moz-box-align:start; box-align:start; } select:nth-child(2){ -webkit-box-align:center; -moz-box-align:center; box-align:center; } select:nth-child(3){ -webkit-box-align:end; -moz-box-align:end; box-align:end; }