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

Il existe une solution partielle pour Chrome :

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

Il centre bien l'option sélectionnée, mais pas les options à l'intérieur de la liste déroulante.

Answer 2

Il s'agit d'aligner le droit. Essayez-le :

select{
    text-align-last:right;
    padding-right: 29px;
    direction: rtl;
}

la prise en charge par le navigateur de l'option text-align-last est disponible ici : https://www.w3schools.com/cssref/css3_pr_text-align-last.asp Il semble que seul Safari ne le prenne toujours pas en charge.

Answer 3

Oui, c'est possible. Vous pouvez utiliser texte-alignement-dernier

text-align-last: center;

Answer 4

2020, J'utilise :

select {
    text-align: center;
    text-align-last: center;
    -moz-text-align-last: center;
}

Answer 5

Vous devez placer la règle CSS dans la classe de sélection.

Utiliser l'indentation du texte CSS

Exemple

<select class="day"> /* option 1 option 2 option 3 option 4 option 5 here */ </select>

Code CSS

select { text-indent: 5px; }