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

Autre "fausse" solution si vous disposez d'une liste d'options dont la longueur du texte est similaire. (page sélectionner par exemple) :

padding-left: calc(50% - 1em);

Cela fonctionne avec Chrome, Firefox et Edge. L'astuce consiste à pousser le texte de la gauche vers le centre, puis soustraire la moitié de la longueur en px, em ou autre du texte de l'option.

La meilleure solution IMO (en 2017) est toujours de remplacer la sélection via JS et de construire sa propre fausse boîte de sélection avec des divs ou autre et de lier les événements de clic sur elle pour le support cross-browser.

Answer 2

Cela a fonctionné pour moi :

text-align: center;
text-align-last: center;

Answer 3

Essayez ceci :

select {
    padding-left: 50% !important;
    width: 100%;
}

Answer 4

Il ne s'agit pas vraiment d'un centrage, mais en utilisant l'exemple ci-dessus, vous pouvez créer une marge gauche dans la boîte de sélection.

<style>.UName { text-indent: 5px; }</style><br>

<select  name="UserName" id="UserName" size="1">
    <option class="UName" selected value="select">Select User</option>
    <option class="UName" value="User1">User 1 Name</option>
    <option class="UName" value="User2">User 2 Name </option>
    <option class="UName" value="User3">User 3 Name</option>
</select>

Answer 5

Vous ne pouvez pas vraiment personnaliser <select> o <option> beaucoup. Le seul moyen (cross-browser) serait de créer manuellement une liste déroulante avec des divs et des css/js pour créer quelque chose de similaire.