Est-il possible de centrer le texte dans la zone de sélection?

Il existe une solution partielle pour Chrome :

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

Il centre l'option sélectionnée, mais pas les options dans la liste déroulante.

Vous devez mettre la règle CSS dans la classe select.

Utilisez CSS text-indent

Exemple

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

Le code CSS

select { text-indent: 5px; }

C'est pour aligner à droite. Essayez-le:

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

Le support du navigateur pour l'attribut text-align-last peut être trouvé ici: https://www.w3schools.com/cssref/css3_pr_text-align-last.asp Il semble que seul Safari ne le supporte toujours pas.

Juste en utilisant ceci:

select {

text-align-last: center;
padding-right: 29px;

}

Cette fonction JS devrait fonctionner pour vous

function getTextWidth(txt) {
  var $elm = $('<span class="tempforSize">'+txt+'</span>').prependTo("body");
  var elmWidth = $elm.width();
  $elm.remove();
  return elmWidth;
}
function centerSelect($elm) {
    var optionWidth = getTextWidth($elm.children(":selected").html())
    var emptySpace =   $elm.width()- optionWidth;
    $elm.css("text-indent", (emptySpace/2) - 10);// -10 for some browers to remove the right toggle control width
}
// on start 
$('.centerSelect').each(function(){
  centerSelect($(this));
});
// on change
$('.centerSelect').on('change', function(){
  centerSelect($(this));
});

Plein Codepen ici: http://codepen.io/anon/pen/NxyovL

J'ai toujours réussi avec le hack suivant pour le faire fonctionner avec css seulement.

padding-left: 45%;
font-size: 50px;

Rembourrage centre le texte et peut être modifié pour la taille du texte :)

Ce n'est évidemment pas 100% correct du point de vue de la validation je suppose mais ça fait le travail:)

Pas tout à fait centrage mais en utilisant l'exemple ci-dessus, vous pouvez faire 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>

Cela a fonctionné pour moi:

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

select {
  text-align: center;
  text-align-last: center;
}
option {
  text-align: left;
}

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

Solution alternative "fausse" si vous avez une liste avec des options similaires dans la longueur du texte (Page select par exemple):

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

Cela fonctionne dans Chrome, Firefox et Edge. L'astuce est ici pour pousser le texte de la gauche au centre, puis soustrayez la moitié de longueur en px, em ou autre du texte de l'option.

meilleure solution IMO (en 2017) remplace toujours le select via JS et construisez votre propre faux select-box avec divs ou autre et lier les événements de clic sur elle pour le support multi-navigateur.

Vous ne pouvez pas vraiment personnaliser <select> ou <option> beaucoup. La seule façon (cross-browser) serait de créer manuellement une liste déroulante avec divs et CSS / js pour créer quelque chose de similaire.

Essayez ceci :

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

Bien que vous ne puissiez pas centrer le texte de l'option dans une sélection, vous pouvez placer un div absolument positionné sur le dessus de la sélection au même effet:

#centered
{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 818px;
  height: 37px;
  text-align: center;
  font: bold 24pt calibri;
  background-color: white;
  z-index: 100;
}

#selectToCenter
{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 840px;
  height: 40px;
  font: bold 24pt calibri;
}

$('#selectToCenter').on('change', function () {
    $('#centered').text($(this).find('option:selected').text());
});

<select id="selectToCenter"></select>
<div id="centered"></div>

Assurez-vous que les deux div et sélectionnez positions fixes dans le document.

Si vous n'avez trouvé aucune solution, vous pouvez utiliser cette astuce sur angularjs ou utiliser js pour mapper la valeur sélectionnée avec un texte sur la div, cette solution est compatible CSS complète sur angular mais nécessite un mappage entre select et div:

var myApp = angular.module('myApp', []);

myApp.controller('selectCtrl', ['$scope',
  function($scope) {
    $scope.value = '';


  }
]);

.ghostSelect {
  opacity: 0.1;
  /* Should be 0 to avoid the select visibility but not visibility:hidden*/
  display: block;
  width: 200px;
  position: absolute;
}
.select {
  border: 1px solid black;
  height: 20px;
  width: 200px;
  text-align: center;
  border-radius: 5px;
  display: block;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-guide-concepts-1-production</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp">
  <div ng-app ng-controller="selectCtrl">
    <div class=select>
      <select ng-model="value" class="ghostSelect">
        <option value="Option 1">Option 1</option>
        <option value="Option 2">Option 2</option>
        <option value="Option 3">Option 3</option>
      </select>
      <div>{{value}}
      </div>
    </div>
  </div>
</body>

J'espère que cela pourrait être utile pour quelqu'un car il m'a fallu un jour pour trouver cette solution sur phonegap.

Si les options sont statiques, vous pouvez écouter l'événement de modification sur votre boîte de sélection et Ajouter un remplissage 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;
    }
});

Cela peut être utile pour des cas d'utilisation. C'est fastidieux et laid mais fonctionne cross-browser: il suffit d'utiliser des espaces codés en dur pour donner à chaque entrée la même longueur.

<select class="form-control" id="sel1">
    <option>-10</option>
    <option>&nbsp;-9</option>
    <option>&nbsp;-8</option>
    <option>&nbsp;-7</option>
    <option>&nbsp;-6</option>
    <option>&nbsp;-5</option>
    <option>&nbsp;-4</option>
    <option>&nbsp;-3</option>
    <option>&nbsp;-2</option>
    <option>&nbsp;-1</option>
    <option>&nbsp;&nbsp;0</option>
    <option>&nbsp;&nbsp;1</option>
    <option>&nbsp;&nbsp;2</option>
    <option>&nbsp;&nbsp;3</option>
    <option>&nbsp;&nbsp;4</option>
    <option>&nbsp;&nbsp;5</option>
    <option>&nbsp;&nbsp;6</option>
    <option>&nbsp;&nbsp;7</option>
    <option>&nbsp;&nbsp;8</option>
    <option>&nbsp;&nbsp;9</option>
    <option>&nbsp;10</option>
</select>

, Vous Pouvez ajouter ce style à la balise de dropdownlist (text-align: center) Comme ci-dessous:

<asp:DropDownList ID="DDL" runat="server" CssClass="form-control btn-default" Style="font-size: 1.25vw; font-weight: bolder; font-family: Sakkal Majalla; text-align: center; text-align-last:center; color: #1658a4; height: 2.5vw; width: 18vw" TabIndex="2" AutoPostBack="true">