¿Es posible centrar el texto en el cuadro de selección?

Intenté esto: 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; }

Como puede ver, no funciona. ¿Hay una manera solo de CSS para centrar el texto en el cuadro de selección?

Me temo que esto no es posible con CSS simple, y no será posible hacer completamente compatible con todos los navegadores.

Sin embargo, utilizando un complemento jQuery, puede diseñar el menú desplegable:

https://www.filamentgroup.com/lab/jquery-ui-selectmenu-an-aria-accessible-plugin-for-styling-a-html-select.html

Este complemento oculta el selectelemento y crea spanelementos, etc. sobre la marcha para mostrar un estilo de lista desplegable personalizado. Estoy bastante seguro de que podrá cambiar los estilos en los tramos, etc. para alinear los elementos al centro.

Hay una solución parcial para Chrome :

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

Centra la opción seleccionada, pero no las opciones dentro del menú desplegable.

Eso es para alinear bien. Intentalo:

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

el soporte del navegador para el text-align-lastatributo se puede encontrar aquí: https://www.w3schools.com/cssref/css3_pr_text-align-last.asp Parece que solo Safari todavía no lo admite.

Tienes que poner la regla CSS en la clase select.

Usar sangría de texto CSS

Ejemplo

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

Código CSS

select { text-indent: 5px; }

Sí, es posible. Puedes usar text-align-last

text-align-last: center;

2020, estoy usando:

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

solo usando esto:

select {

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

}

Esta función JS debería funcionar para usted

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));
});

Codepen completo aquí: http://codepen.io/anon/pen/NxyovL

Siempre me salí con la suya para que funcione solo con CSS.

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

el relleno centrará el texto y se puede ajustar para el tamaño del texto :)

Obviamente, esto no es 100% correcto desde el punto de vista de la validación, supongo, pero hace el trabajo :)

Solución alternativa "falsa" si tiene una lista con opciones similares en longitud de texto (selección de página, por ejemplo):

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

Esto funciona en Chrome, Firefox y Edge. El truco está aquí para empujar el texto de la izquierda al centro, luego restar la mitad de la longitud en px, em o lo que sea del texto de la opción.

La mejor solución IMO (en 2017) todavía está reemplazando la selección a través de JS y construye tu propio cuadro de selección falso con divs o lo que sea y vincula los eventos de clic en él para soporte de navegador cruzado.

No del todo centrado, pero usando el ejemplo anterior puede hacer un margen izquierdo en el cuadro de selección.

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

esto funcionó para mí:

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

prueba esto :

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

Realmente no se puede personalizar <select>o <option>mucho. La única forma (cross-browser) sería crear manualmente un menú desplegable con divs y css / js para crear algo similar.

Si no encontró ninguna solución, puede usar este truco en angularjs o usar js para asignar el valor seleccionado con un texto en el div, esta solución es totalmente compatible con css en angular pero necesita una asignación entre select y 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>

Espero que esto pueda ser útil para alguien, ya que me llevó un día encontrar esta solución en phonegap.

Si bien no puede centrar el texto de la opción dentro de una selección, puede colocar un div absolutamente posicionado sobre la parte superior de la selección para el mismo efecto:

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

Asegúrese de que tanto el div como el select tengan posiciones fijas en el documento.

Todavía no es 100%, ¡pero puedes usar este fragmento!

text-align-last: centro; // Para Chrome text-align: center; // Para Firefox

¡No funciona en Safari o Edge, por ahora!

Si las opciones son estáticas, puede escuchar el evento de cambio en su cuadro de selección y agregar relleno para cada elemento individual

$('#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;
    }
});

agregar & nbsp como este ...

    <option value="0"> &nbsp&nbsp&nbsp&nbsp&nbsp--Select Name--</option>

hasta que obtenga un efecto de texto alineado al centro