imagen - centrar texto horizontalmente y vertical css

Alinear verticalmente el texto dentro del campo de entrada de altura fija sin pantalla: ¿tabla o relleno?

Question

La propiedad de altura de línea normalmente se ocupa de la alineación vertical, pero no de las entradas. ¿Hay alguna manera de centrar el texto automáticamente sin jugar con el relleno?

Answer 1

Así es como lo hago.

<ul>
   <li>First group of text here.</li>
   <li><input type="" value="" /></li>
</ul>

luego dentro de tu archivo CSS,

ul li {
  display: block;
  float: left;
}

Eso debería funcionar para ti.

Answer 2

Después de mucha búsqueda y frustración, un combo de altura de ajuste, altura de línea y sin relleno funcionó para mí cuando usé una imagen de fondo de altura fija (24px) para un campo de entrada de texto.

.form-text {
    color: white;
    outline: none;
    background-image: url(input_text.png);
    border-width: 0px;
    padding: 0px 10px 0px 10px;
    margin: 0px;
    width: 274px;
    height: 24px;
    line-height: 24px;
    vertical-align: middle;
}

Answer 3

En CSS apliqué esto en el campo de texto y funcionó para mí.

text-align: center;

Answer 4

En Opera 9.62, Mozilla 3.0.4, Safari 3.2 (para Windows) ayuda, si pone algo de texto o al menos un espacio en blanco dentro de la misma línea que el campo de entrada.

<div style="line-height: 60px; height: 60px; border: 1px solid black;">
    <input type="text" value="foo" />&nbsp;
</div>

(imagine un & nbsp después del enunciado de entrada)

IE 7 ignora todos los hack de CSS que probé. Yo recomendaría usar relleno solo para IE. Debería facilitarle la posición correcta si solo tiene que funcionar dentro de un navegador específico.

Answer 5

En mi opinión, la respuesta en esta página con la mayor cantidad de votos es la mejor respuesta, pero su matemática fue incorrecta y no pude comentar al respecto.

Necesitaba un cuadro de entrada de texto con exactamente 40 píxeles de alto, incluido un borde de 1 píxel en todos los sentidos. Por supuesto, quería que el texto se alineara verticalmente en el centro en todos los navegadores.

1 pixel borde superior
Fondo de 1 pixel
Almohadilla superior de 8 píxeles
Almohadilla inferior de 8 píxeles
Tamaño de fuente de 22 píxeles

1 + 1 + 8 + 8 + 22 = 40 píxeles exactamente.

Una cosa para recordar es que debe eliminar su propiedad de altura CSS o esos píxeles se agregarán a su total anterior.

<input type="text" style="padding-top:8px; padding-bottom:8px; margin: 0; border: solid 1px #000000; font-size:22px;" />

Esto funciona en Firefox, Chrome, IE 8 y Safari. Solo puedo suponer que si algo tan simple como este funciona en IE8, debería funcionar de manera similar en 6, 7 y 9, pero no lo he probado. Por favor, hágamelo saber y editaré esta publicación en consecuencia.

Answer 6

Ir por line-height .

La etiqueta de vertical-align funciona bien para el botón de envío, pero no para el texto en el campo de entrada. Establecer la altura de line-height a la altura del campo de entrada funciona en todos los navegadores. Incl IE7.

Answer 7

Lo siento de antemano la respuesta simple ...

Simplemente elimine el texto del título y use el marcador de posición de entrada para el título de la etiqueta. Algunos trabajos visuales y css después de eso y su forma se verán ajustados y fáciles de usar. Soy consciente de las desventajas, pero esto aliviará por completo la lucha de alineación.

De hecho, ahora estoy compilando uno que incluye barra de progreso de varios pasos y css en WordPress ... basado en el siempre popular plugin Contact Form 7 y se ve genial. Avísame si quieres una captura de pantalla.

¡Aclamaciones!

LaddtheImpaler

Answer 8

Me encontré con este problema yo mismo. Descubrí que no se especifica una altura de entrada, pero al combinar la altura de la fuente y el relleno, se obtiene un texto alineado verticalmente.

Por ejemplo, digamos que quiere tener un cuadro de entrada alto de 42px, con un tamaño de letra de 20px. Simplemente podría encontrar la diferencia entre la altura de entrada y el tamaño de fuente, dividirlo entre dos y establecer su relleno a esa cantidad. En este caso, tendría un valor total de 22px de relleno, que es de 11px en cada lado.

<input type="text" style="padding: 11px 0px 11px 0px; font-size: 20px;" />

Eso le daría una caja de entrada de 42px de altura con una alineación vertical perfecta.

Espero que ayude.

Answer 9

No lo he intentado yo mismo, pero intento configurar:

height : 36px; //for other browsers
line-height: 36px; // for IE

Donde 36px es el alto de tu entrada.

Answer 10

Sé que llego tarde a la fiesta, pero espero que esto ayude a cualquiera que busque una respuesta concisa que funcione en todos los principales navegadores (excepto IE6, hemos decidido dejar de admitir ese navegador, así que me niego a mirarlo). .

    #search #searchbox {
    height: 21px;
    line-height: 21px;
}

¡aclamaciones! JP

Answer 11

Si su elemento es un elemento de bloque contenido / o con una pantalla como esta:

display: table-cel

O bien, con una altura de línea fija, puede establecer la alineación vertical de esta forma:

Vertical-Align: Middle;

No funcionará para otros casos, pero funciona bien en estas condiciones.

Answer 12

Simplemente no configure la altura del cuadro de entrada, solo configure el tamaño de fuente, que estará bien

Answer 13

Tarde en la fiesta, pero las respuestas actuales no funcionarán si tiene el tamaño de la caja: conjunto de recuadro de borde (que muchas personas hacen para los elementos de formulario en estos días).

Simplemente reinicie el tamaño de la caja para IE8 a tamaño de box-sizing: content-box; luego use una de las respuestas de relleno / altura.

Answer 14

Tratar :

height: 21px;
line-height: 21px; /* FOR IE */

Porque en algunas versiones de IE (<9) la altura de la propiedad no se interpreta correctamente.

Answer 15

este ejemplo puede resolver sus problemas para siempre:

agregue esto a la propiedad css de entrada y nunca agregue% en vez de px:

height:25px;

Answer 16

input[type=text]
{
   height: 15px; 
   line-height: 15px;
}

esta es la forma correcta de establecer la posición vertical-media.