web-dev-qa-db-fra.com

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

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 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!

cssgwtselectvertical-alignment
63
datauser

Votre meilleure option sera probablement d’ajuster le rembourrage supérieur et de le comparer d’un navigateur à l’autre. 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.

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

MODIFIER

Ce sont les options que je pense que vous avez, puisque vertical-align n'est pas consistant dans les navigateurs.

A. Supprimez l’attribut height et laissez le navigateur le gérer. Cela fonctionne généralement 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. Ajoutez le remplissage en haut pour abaisser le texte. (Abaissé 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 pour essayer d’adapter un peu plus la hauteur sélectionnée.

<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>
45
user401183

Je suis tombé sur cet ensemble de propriétés css qui semblent aligner verticalement le texte d'éléments sélectionnés 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 encore plus loin dans IE8. Si je redéfinis la propriété box-sizing sur border-box, au moins, cela ne fera qu'empirer IE8 (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. Cependant, le problème semble provenir des styles intégrés au fichier forms.css de FF qui affectent les éléments d’entrée et de sélection. La propriété en question est line-height: normal! Important . Il ne peut pas être remplacé. J'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 avec du texte raisonnablement centré verticalement. 

18
Shelly Skeens

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;
   }
}
10
adam187

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

Solution: Javascript.

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

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

Remarque: je ne recommande de porter quoi que ce soit avec js sauf si cela est absolument nécessaire. CSS doit toujours être la solution principale pour le style - considérez jQuery (dans cet exemple particulier) comme l’axe intitulée "Pause en cas d’urgence".

* UPDATE * Ceci est un ancien post et comme il semble que les gens font toujours référence à cette solution, je dois préciser (comme mentionné dans les commentaires) que depuis la version 1.9, cette fonctionnalité a été supprimée de jQuery. . Veuillez consulter le projet Modernizr pour effectuer la détection de fonctionnalité au lieu de le navigateur reniflant.

4
Scott Sword

Jusqu'ici cela fonctionne bien pour moi:

line-height: 100%;
2
user3403273

vient d'avoir ce problème, mais pour les appareils mobiles, principalement mobile firefox . Le truc pour moi était de définir un height , padding , line height et enfin box dimensionnement , 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;
2
asherrard

J'ai constaté que le simple fait de régler la hauteur de ligne et la hauteur sur le même nombre de pixels produisait le résultat le plus cohérent. Par "plus cohérent", j'entends une cohérence optimale, mais bien sûr, ce n'est pas à 100% "parfait en pixels" pour tous les navigateurs. De plus, j'ai constaté que Firefox (v. 17.x) tend à encombrer le texte de l'option situé à droite contre la flèche déroulante. J'ai atténué cela avec une petite quantité de rembourrage à droite sur l'élément OPTION uniquement. Ce paramètre n’affecte pas l’apparence dans 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. Évidemment, vous devrez ajuster les proportions en fonction de votre contexte d’interface utilisateur.

1
code-sushi

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

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

Essayez de définir l'attribut "line-height"

Comme ça:

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

Voici de la documentation sur cet attribut:

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

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

0
AndreaRivadossi

J'ai le même problème et je travaille dessus depuis des heures. J'ai enfin trouvé quelque chose qui fonctionne. 

En gros, rien de ce que j’ai essayé n’a fonctionné dans toutes les situations jusqu’à ce que j’ai positionné une div pour répliquer le texte de la première option sur la zone de sélection et laisser la première option vide. J'ai utilisé {pointer-events: none;} pour permettre aux utilisateurs de cliquer à travers le div. 

HTML

    <div class='custom-select-container'>
      <select>
        <option></option>
        <option>option 1</option>
        <option>option 2</option>
      </select>
      <div class='custom-select'>
        Select an option
      </div>
    <div>

CSS

.custom-select{position:absolute; left:28px; top:10px; z-index:1; display:block; pointer-events:none;}
0
Adam Ulivi
display: flex;
align-items: center;
0
Victor Bredihin

tu peux donner : 

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

et pour parent vous devez donner la position: relative . cela fonctionnera.

0
puja

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

Veuillez consulter ce bogue pour plus d'informations https://bugzilla.mozilla.org/show_bug.cgi?id=610733

0
lukefrake

J'avais l'habitude d'utiliser height et line-height avec les mêmes valeurs, mais cela s'est avéré incohérent sur tous les sites Web. Mon approche actuelle est de mélanger cela avec un rembourrage comme ça.

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

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

0
Jason Lydon

J'ai constaté que l'ajout de padding-top au bas de la flèche grise déroulante grise à droite était indésirable. 

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

0
laurencedorman