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

Question

Je veux aligner verticalement le texte dans la zone de sélection. J'ai essayé d'utiliser

 select{
   verticle-align:middle;
}
 

Cependant, cela ne fonctionne dans aucun navigateur. Chrome semble aligner le texte de la zone de sélection au centre par défaut. FF l'aligne en haut et IE l'aligne en bas. Y'a-t-il une quelconque façon de réussir cela? J'utilise le widget Sélectionner de GWT dans UIBinder.

C'est actuellement ce que j'ai:

 select{
    height: 28px !important;
    border: 1px solid #ABADB3;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}
 

Merci!

Answer 1

Votre meilleure option sera probablement pour ajuster le haut de rembourrage et de comparaison entre les différents navigateurs. Il n'est pas parfait, mais je pense qu'il est aussi proche que vous pouvez obtenir.

padding-top:4px;

La quantité de remplissage, vous aurez besoin dépendra de la taille de la police.

Astuce: Si votre police est définie en px, set de remplissage en px . Si votre police est définie en em, définir le remplissage en em trop.

MODIFIER

Ce sont les options je pense que vous avez, depuis vertical-align n'est pas consistante à travers les navigateurs.

A. Retirez l'attribut hauteur et laisser le navigateur de la gérer. Généralement cela fonctionne le mieux pour moi.

 <style>
    select{
        border: 1px solid #ABADB3;
        margin: 0;
        padding: auto 0;
        font-size:14px;
    }
    </style>
    <select>
        <option>option 1</option>
        <option>number 2</option>
    </select>

---

B. Ajouter des haut-rembourrage de pousser vers le bas le texte. (Poussé vers le bas de la flèche dans certains navigateurs)

<style>
select{
    height: 28px !important;
    border: 1px solid #ABADB3;
    margin: 0;
    padding: 4px 0 0 0;
    font-size:14px;
}
</style>
<select>
    <option>option 1</option>
    <option>number 2</option>
</select>

---

C. Vous pouvez agrandir la police d'essayer et de faire correspondre la sélectionner hauteur d'un peu plus agréable.

<style>
select{
    height: 28px !important;
    border: 1px solid #ABADB3;
    margin: 0;
    padding: 0 0 0 0;
    font-size:17px;
}
</style>
<select>
    <option>option 1</option>
    <option>number 2</option>
</select>

Answer 2

Je suis tombé sur cet ensemble de propriétés css qui semblent alignez verticalement le texte dans la taille de sélectionner des éléments dans Firefox:

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

Si quelque chose, cependant, il pousse le texte vers le bas encore plus loin dans IE8. Si j'ai mis la box-sizing propriété border-box, elle au moins ne fait pas de IE8 pire (et FF s'applique toujours à l'-moz-box-sizing de la propriété). Il serait agréable de trouver une solution pour IE, mais je ne retiens pas mon souffle.

Edit: Nix. Il ne fonctionne pas après le test. Pour toute personne intéressée, cependant, le problème semble provenir de styles intégrés dans FF formulaires.fichier css affectant d'entrée et de sélectionner des éléments. La propriété en question est line-height:normal !important. Il ne peut pas être remplacée. Je l'ai essayé. J'ai découvert que si je supprime la propriété intégrée dans Firebug, je reçois un élément select raisonnablement à la verticale centrée sur le texte.

Answer 3

Ma solution est d’ajouter padding-top pour certains ciblés à Firefox uniquement comme ceci

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

Answer 4

J'ai rencontré ce problème exactement. Mon sélectionnez options ont été centrés verticalement dans webkit, mais ff par défaut vers le haut. Après avoir regardé autour de moi, je n'ai pas vraiment envie de créer un travail autour de qui était en désordre et en fin de compte n'a pas résolu mon problème.

Solution: Javascript.

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

Cela résout votre problème de manière très précise. Le seul inconvénient est que je suis à l'aide de jQuery, et si vous n'êtes pas à l'aide de jQuery sur votre projet, vous ne pouvez pas à inclure une bibliothèque js pour un one-off.

Note: je ne recommande pas de style de n'importe quoi avec js, sauf si absolument nécessaire. CSS devrait toujours être la principale solution pour le style de jQuery (dans cet exemple) que l'axe intitulée "Briser en cas d'Urgence".

*Mise à JOUR* C'est un vieux post et comme il semble, les gens sont toujours référencement de cette solution que je devrais état (comme mentionné dans les commentaires) que, depuis de 1,9 cette fonction a été supprimée à partir de jQuery. Veuillez voir le Modernizr projet pour effectuer la détection de fonctionnalité en lieu et place de la détection de browser.

Answer 5

vient d'avoir ce problème, mais pour les appareils mobiles, principalement les firefox mobiles . Le truc pour moi était de définir une hauteur , un remplissage , une hauteur de ligne et enfin une taille de boîte , le tout sur l'élément select. N'utilisez pas vos exemples de numéros ici, mais pour l'exemple:

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