Cómo centrar texto en una lista de selección

Question

Tengo problemas para diseñar una lista de selección en un formulario html. Básicamente, quiero que tenga un tamaño de letra de 12 píxeles y una altura de 30 píxeles; El problema es que la caja se dibuja a la altura correcta, pero la representación del texto varía en cada navegador. En Firefox, lo muestra en la esquina superior izquierda. Quiero centrar verticalmente el texto. ¿Alguien sabe de una manera de hacer esto o necesito hacer algo personalizado de una ul?

Gracias

Answer 1

La única manera es dejar caer el <select> y utilizar un <input type="text"< y una <div> para darle la sensación exacta de una lista de selección, pero con la capacidad de hacer todo lo posible, ya que será un <li> que tiene al final.

Utilizo este enfoque para no mostrar texto alineado, pero para usar un icono pequeño por cada línea. Esto también me da la capacidad de mostrar exactamente cómo quiero saber qué navegador se utiliza también.

como la siguiente imagen

Answer 2

no se puede personalizar de forma fiable <select> elementos usando CSS en todos los navegadores.

Necesita hacer un control de lista personalizado.

Answer 3

Buena suerte con esto, text-align solo funciona con elementos de bloque. Los navegadores formatean la lista de selección de forma diferente, como ocurre con la mayoría de los elementos del campo de formulario (como el tipo de entrada de archivo). Desea mejores días. Las soluciones que he visto para esto son realmente feas.

Answer 4

poco tarde para añadir una nueva respuesta, sin embargo me encontré con su pregunta buscando la misma respuesta y pensó que debía haber otra manera.

¡Hurra! De hecho, encontré uno!

Así que para cualquier persona nueva que viene a encontrar esta respuesta, aquí es cómo he logrado esto:

Simplemente use   para centrar manualmente cada opción en su lista desplegable.