Quiero alinear verticalmente el texto en el cuadro de selección

Quiero alinear verticalmente el texto en el cuadro de selección. Intenté usar

select{ verticle-align:middle; } 

sin embargo, no funciona en ningún navegador. Chrome parece alinear el texto en el cuadro de selección al centro como predeterminado. FF lo alinea en la parte superior e IE lo alinea en la parte inferior. ¿Hay alguna forma de lograr esto? Estoy usando el widget Seleccionar de GWT en UIBinder.

Esto es lo que tengo actualmente:

 select{ height: 28px !important; border: 1px solid #ABADB3; margin: 0; padding: 0; vertical-align: middle; } 

¡Gracias!

Su mejor opción probablemente sea ajustar el relleno superior y comparar en todos los navegadores. No es perfecto, pero creo que es lo más cerca que puedes llegar.

 padding-top:4px; 

La cantidad de relleno que necesita dependerá del tamaño de la fuente.

Consejo: Si su fuente está configurada en px , configure también el relleno en px . Si su fuente está configurada en em , configure también el relleno en em .

EDITAR

Estas son las opciones que creo que tiene, ya que vertical-align no es consistente en todos los navegadores.

A. Elimine el atributo de altura y permita que el navegador lo maneje. Esto generalmente funciona mejor para mí.

    

B. Agregue relleno superior para presionar hacia abajo el texto. (Empujado por la flecha en algunos navegadores)

   

C. Puede agrandar la fuente para intentar hacer coincidir la altura de selección un poco más.

   

Me encontré con este conjunto de propiedades CSS que parecen alinear verticalmente el texto en elementos seleccionados de tamaño en Firefox:

 select { box-sizing: content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; } 

Si algo, sin embargo, empuja el texto aún más lejos en IE8. Si configuro la propiedad de tamaño de caja de nuevo en border-box, al menos no empeora IE8 (y FF aún aplica la propiedad -moz-box-sizing). Sería bueno encontrar una solución para IE, pero no estoy conteniendo la respiración.

Editar: Nix esto. No funciona después de la prueba. Sin embargo, para cualquiera que esté interesado, el problema parece provenir de los estilos incorporados en el archivo forms.css de FF que afecta a los elementos de entrada y selección. La propiedad en cuestión es la altura de la línea: normal! Importante . No puede ser anulado. He intentado. Descubrí que si borraba la propiedad incorporada en Firebug obtengo un elemento de selección con texto razonablemente centrado verticalmente.

Mi solución es agregar relleno para seleccionar solo para Firefox solo así

 // firefox vertical aligment of text @-moz-document url-prefix() { select { padding-top: 13px; } } 

Me encontré con este problema exactamente. Mis opciones de selección se centraron verticalmente en webkit, pero de manera predeterminada las ubiqué en la parte superior. Después de mirar alrededor, realmente no quería crear un trabajo que fuera desordenado y, en última instancia, no resolvió mi problema.

Solución: Javascript.

 if ($.browser.mozilla) { $('.styledSelect select').css( "padding-top","8px" ); } 

Esto resuelve tu problema con mucha precisión. El único inconveniente aquí es que estoy usando jQuery, y si no está utilizando jQuery en su proyecto, es posible que no desee incluir una biblioteca js para una sola vez.

Nota: No recomiendo diseñar nada con js a menos que sea absolutamente necesario. CSS siempre debe ser la solución principal para el estilo: piense en jQuery (en este ejemplo particular) como el hacha titulada “Break in Case of Emergency”.

* ACTUALIZACIÓN * Esta es una publicación anterior y dado que parece que las personas siguen haciendo referencia a esta solución, debo indicar (como se menciona en los comentarios) que desde 1.9 esta función se ha eliminado de jQuery. Consulte el proyecto Modernizr para realizar la detección de características en lugar del rastreo del navegador .

Acabo de tener este problema, pero para dispositivos móviles, principalmente para dispositivos móviles de Firefox . El truco para mí fue definir la altura , el relleno , la altura de la línea y finalmente el tamaño de la caja , todo en el elemento seleccionado. No use sus números de ejemplo aquí, sino por el bien de un ejemplo:

 padding: 20px; height: 60px; line-height: 1; -webkit-box-sizing: padding-box; -moz-box-sizing: padding-box; box-sizing: padding-box; 

Hasta ahora, esto está funcionando bien para mí:

 line-height: 100%; 

Lo intenté siguiendo y funcionó para mí:

 select { line-height:normal; padding:3px; } 

Descubrí que simplemente establecer la altura y la altura de la línea en la misma cantidad de píxeles producía el resultado más consistente. Por “más consistente” me refiero a una coherencia óptima, pero, por supuesto, no es 100% “perfecto como un píxel” para los navegadores. Además, encontré que Firefox (v. 17.x) tiende a aglomerar el texto de la opción a la derecha en contra de la flecha desplegable; Alivié esto con una pequeña cantidad de relleno ajustado a la derecha en el elemento OPCIÓN solamente. Esta configuración no afecta la apariencia en IE 7-9.

Mi resultado:

 select, option { font-size:10px; height:19px; line-height: 19px; padding:0; margin:0; } option { padding-right:6px; /* Firefox */ } 

NOTA – mi elemento SELECT usa una fuente más pequeña, 10px. Obviamente, deberá ajustar las proporciones de acuerdo con su contexto de IU específico.

Intenta establecer el atributo “altura de línea”

Me gusta esto:

 select{ height: 28px !important; line-height: 28px; } 

Aquí hay documentación sobre este atributo:

http://www.w3.org/wiki/CSS/Properties/line-height

http://www.w3schools.com/cssref/pr_dim_line-height.asp

Solía ​​usar height y height line-height con los mismos valores, pero resultó ser inconsistente a través de las interwebs. Mi enfoque actual es mezclar eso con relleno como tal.

 select { font-size:14px; height:18px; line-height:18px; padding:5px 0; width:200px; text-align:center; } 

También puede usar padding para el valor horizontal en lugar del width + text-align

He tenido el mismo problema y he estado trabajando en él durante horas. Finalmente he encontrado algo que funciona.

Básicamente, nada de lo que probé funcionaba en todas las situaciones hasta que coloqué un div para replicar el texto de la primera opción sobre el cuadro de selección y dejé la primera opción real en blanco. Usé {pointer-events: none;} para permitirles a los usuarios hacer clic en div.

HTML

  
Select an option

CSS

 .custom-select{position:absolute; left:28px; top:10px; z-index:1; display:block; pointer-events:none;} 

Descubrí que solo agregando un padding-top clic en el cuadro de la flecha desplegable gris a la derecha, lo cual era indeseable.

El método que funcionó para mí fue ingresar al inspector y agregar incrementos de padding hasta que el texto se centró. Esto también reducirá el tamaño del ícono desplegable, pero también estará centrado, por lo que no es tan perturbador para la vista.

Esto ahora se ha solucionado en Firefox Nightly y estará en la próxima versión de Firefox.

Consulte este error para obtener más información https://bugzilla.mozilla.org/show_bug.cgi?id=610733

puedes dar :

 select{ position:absolute; top:50%; transform: translateY(-50%); } 

y para ser padre tienes que dar posición: relativo. funcionará.

La solución general más cercana que conozco usa la propiedad box-align, como se describe aquí . El ejemplo de trabajo está aquí (puedo probarlo solo en Chrome, creo que también es equivalente para otros navegadores).

CSS:

 select{ display:-webkit-box; display:-moz-box; display:box; height: 30px;; } select:nth-child(1){ -webkit-box-align:start; -moz-box-align:start; box-align:start; } select:nth-child(2){ -webkit-box-align:center; -moz-box-align:center; box-align:center; } select:nth-child(3){ -webkit-box-align:end; -moz-box-align:end; box-align:end; } 
Intereting Posts