Est-il possible de centrer le texte dans une boîte de sélection ?

Question

J'ai essayé ceci : http://jsfiddle.net/ilyaD/KGcC3/

HTML :

<select name="state" class="ddList">
    <option value="">(please select a state)</option>
    <option class="lt" value="--">none</option>
    <option class="lt" value="AL">Alabama</option>
    <option class="lt" value="AK">Alaska</option>
    <option class="lt" value="AZ">Arizona</option>
    <option class="lt" value="AR">Arkansas</option>
    <option class="lt" value="CA">California</option>
    <option class="lt" value="CO">Colorado</option>
</select>

CSS :

select { width: 400px; text-align: center; }
select .lt { text-align: center; }

Comme vous pouvez le constater, cela ne fonctionne pas. Existe-t-il une méthode CSS pour centrer le texte dans la boîte de sélection ?

Answer 1

J'ai eu un problème similaire. Ma solution a été de passer à une police de taille fixe dans la section style :

option {
  font-family: Courier New;
  width: 12ch;
  font-size: 14pt
}

select {
  font-family: Courier New;
  width: 14ch;
  font-size: 14pt
}

Dans le corps, j'ai complété les options indiquées par des soulignements pour qu'elles aient la même longueur.
La note a été soulignée des deux côtés pour centrer l'affichage :

<select onchange='O.src=this.options[this.selectedIndex].value' align="center">
  <option value="" align="center">___(none)___</option>
  <option value="https://www.247backgammon.org/" align="center">_Backgammon_</option>
  <option value="https://www.247klondike.com/klondikeSolitaire3card.php" align="center">__Klondike__</option>
  <option value="https://www.247minesweeper.com/" align="center">_Minesweeper</option>
  <option value="https://sudoku.com/" align="center">
    <p>___Soduku___</p>
  </option>
</select>

Answer 2

Ce n'est pas encore 100%, mais vous pouvez utiliser cet extrait !

text-align-last : center ; // Pour Chrome text-align : center ; // Pour Firefox

Ne fonctionne pas sur Safari ou Edge, pour l'instant !

Answer 3

Si les options sont statiques, vous pouvez écouter l'événement de changement sur votre boîte de sélection et ajouter un rembourrage pour chaque élément individuel

$('#id').change(function() {
    var select = $('#id');
    var val = $(this).val();

    switch(val) {
        case 'ValOne':
            select.css('padding-left', '30px');
            break;
        case 'ValTwoLonger':
            select.css('padding-left', '20px');
             break;
        default:
            return;
    }
});