¿Cómo alinear verticalmente el texto al centro en HTML?

No encontré ninguna explicación en Internet sobre cómo alinear verticalmente el texto en un HTML select. No quiero alinear el texto en el <option></option> porque eso no es difícil. Quiero alinear el texto que está seleccionado en el <select></select>.¿Cómo alinear verticalmente el texto al centro en HTML?

He observado navegadores como Firefox, Opera, Chrome e Internet Explorer y el texto solo está centrado correctamente por defecto en Opera y Chrome. En Firefox va a la parte superior, en Internet Explorer va a la parte inferior.

¿Cómo se puede hacer para que funcione de la misma manera en todos los navegadores?

Fuente

2010-11-25 red

Podría publicar el código que he probado hasta ahora? – romaintaz

Probé esto @http: //jsfiddle.net/HfWHT/ Funciona con firefox pero nt cromo – crodjer

¿Quiere decir _vertically_ align? – Jeriko

Sí, alinear verticalmente :-) medio

Ejemplo

Si hubiera texto como "perro, gato, tigre" en la opción y la primera opción se selecciona "perro" pero la altura de < select> tiene 34 píxeles, pero el tamaño de fuente es como 12 píxeles, por lo que verá que el texto será mucho más pequeño que el < select> y es por eso que se alineará en un navegador en la parte superior y en otro en la parte inferior y en otro más se alineará en el medio. Quiero que el texto se alinee en el medio vertical en todos los navegadores.

Aquí es simple código que está mostrando el problema

<html> 
    <body> 
     <style> 
      .select{ 
       height:34px; 
       font-size:12px; 
      } 
     </style> 

     <select class="select"> 
      <option>dog</option> 
      <option>cat</option> 
      <option>tiger</option> 
     </select> 
    </body> 
</html>

Fuente

2010-11-26 08:14:46 red

La única solución que he encontrado que se pueden alinear verticalmente el texto en una etiqueta <select> en Firefox (FF 11) es utilizar el relleno:

select.yourclass 
{ 
    font-size: 1.1em; /* Size of the text */ 

height: 41px; /* The height you want the <select> to be */ 
padding-top: 7px; /* how far from the top you want the text to appear */ 
}

En el código anterior, debe calcular manualmente los valores relevantes (o quizás el lado del servidor o JS).

El único inconveniente de esta solución es que parece que en Firefox la flecha desplegable del control también se desplaza hacia abajo por el valor de padding-top, por lo que no es perfecto.

Fuente

2012-03-03 08:44:59 ose

Vas a tener que utilizar etiquetas para la alineación heres el violín: http://jsfiddle.net/E7mxq/2/

Fuente

2012-06-06 20:18:26 Casualbot

El código no funciona. Seleccione la opción 1 en la segunda lista --http: //jsfiddle.net/E7mxq/132/ –

Es una respuesta similar a @ShawnBernard.

Pero lo que necesita hacer es crear un ancho específico para el elemento seleccionado en el formulario. Una vez que lo hagas, agrega el text-align: center; en el CSS seleccionado y configura el relleno para el elemento de selección.

Lo que crea CSS para el formulario de opción, que solo hace que el fondo desplegable sea más grande.

No hay una manera fácil de decirle la cantidad de relleno que debe configurar, ya que dependerá de la altura que desee configurar, así como de los estilos CSS de la fuente.

ACTUALIZACIÓN: Al igual que @RajivPingale dijo, el formulario de opciones no va a tomar debido a las rutinas específicas del navegador. Por lo tanto, esta capacidad no funcionará con todos los navegadores.

Aquí es mi jsFiddle: http://jsfiddle.net/abrielshipley/Y4eJm/4/

Fuente

2012-12-05 08:09:28 Abriel

su código no está funcionando en jsfiddle –

@RajivPingale ¿cómo se ve mi código desde ese enlace? ¿puedes describir visualmente lo que está pasando? – Abriel

Pruebe esto y encontrará el error en 'chrome' http://jsfiddle.net/Y4eJm/5/ –

Por un lado, text-align aplica para bloquear sólo los elementos de nivel. Pero aunque asigne visualización: bloquee los elementos de selección y opción, , los textos probablemente no estarán centrados. La razón es que los navegadores usan sus rutinas integradas para representar campos de formulario, y estas rutinas se ven afectadas solo por las reglas de CSS.

se puede ir para jQuery menús desplegables

Fuente

2012-12-05 08:30:19

he encontrado el siguiente CSS como la manera más fácil:

select{ 
    padding-top: 4px; 
}

por supuesto que sería ajustar el valor de relleno según su fuente. También puede orientarlo de la siguiente manera: #SomeID select { padding-top: 4px; }

Hay tíos más experimentados por ahí, pero estos son mis dos bits :-)

Saludos

Fuente

2013-04-05 13:18:09

¿Cómo alinear verticalmente el texto al centro en HTML?

Respuesta

Cuestiones relacionadas