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

Intento esto: http://jsfiddle.net/ilyaD/KGcC3/

HTML:

 (please select a state) none Alabama Alaska Arizona Arkansas California Colorado  

CSS:

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

Como puede ver, no funciona. ¿Hay una forma 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 compatible completamente entre navegadores.

Sin embargo, usando un plugin de jQuery, puedes diseñar el menú desplegable:

http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

Este complemento oculta el elemento select y crea elementos de span , 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 en el centro.

Hay una solución parcial para Chrome :

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

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

Tienes que poner la regla de CSS en la clase de selección.

Usar texto de sangría de CSS

Ejemplo

  

Código CSS

 select { text-indent: 5px; } 

Eso es para alinear a la derecha. Intentalo:

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

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

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 = $(''+txt+'').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 he salido con el siguiente truco para que funcione solo con CSS.

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

el relleno centrará el texto y se puede modificar para el tamaño del texto 🙂

Obviamente, esto no es 100% correcto desde el punto de vista de la validación, pero funciona bien 🙂

No muy centrado, pero utilizando el ejemplo anterior puede hacer un margen izquierdo en el cuadro de selección.

 

esto funcionó para mí:

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

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

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

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

enter image description here

La mejor solución IMO (en 2017) sigue reemplazando a la selección a través de JS y crea tu propia caja de selección falsa con divs o lo que sea y enlaza eventos de clics para obtener compatibilidad entre navegadores.

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

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

prueba esto :

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

Si bien no puede centrar el texto de la opción dentro de una selección, puede colocar un div completamente 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()); });  

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

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 cumple con css completo 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>    Example - example-guide-concepts-1-production    
{{value}}

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

Esto puede ser útil para casos de uso muy específicos. Es tedioso y feo pero funciona en todos los navegadores: solo use espacios en blanco codificados para que cada entrada tenga la misma longitud.

  

Puede agregar este estilo a la etiqueta de la lista desplegable (text-align: center) Como a continuación: