2010-08-07 21 views
5

Actualmente estoy trabajando con un cuadro de texto que tiene un fondo. Me preguntaba si es posible centrar el texto (verticalmente) dentro del cuadro de texto.Texto de centrado (verticalmente) dentro de un cuadro de texto usando CSS

importante: está perfectamente centrado en firefox. Solo IE lo escribe demasiado alto por alguna razón. Probé la altura de línea, el relleno y el margen. Nada funciona. ¿Algunas ideas?

EDITAR: Este es mi CSS actual. Debo decir que probé el método de margen superior y no funcionó para mí. Además, como mencioné, esto es solo para IE. Tengo hojas de estilo IE específicas, así que no te preocupes.

.textValue { color: black; font-size: 12px; font-family: David, sans-serif; } 
input { width: 110px; padding: 0 2px; padding-right: 4px; height: 20px; border: solid 1px white; margin-bottom: 0px; background: url(../images/contactTextBg.png) no-repeat top right; } 
label { float: right; margin-left: 5px; font-size: 13px; } 

Para IE, tengo el siguiente:

.textValue { font-size: 14px; } 

como para HTML:

  <tr> 
       <td><label for="name">name</label></td> 
       <td><input type="text" name="name" id="name" class="textValue" value="" /></td> 
      </tr> 

Gracias, Amit

+0

Cuando dices "cuadro de texto" ¿te refieres a Robusto

+0

Muéstranos lo que tienes en términos de CSS para que podamos echarle un vistazo. .. – NinjaCat

Respuesta

7

Me pregunto cómo son capaces de alinear el texto en un cuadro de texto, pero como dices, aquí está la sugerencia:

Para idiota IE, puede utilizar este truco específica IE:

margin-top:50px; /* for standard-compliant browsers */ 
*margin-top:50px; /* for idiot IE */ 
_margin-top:50px; /* for idiot IE */ 

Es posible que desee probar otras propiedades similares si quieres más que margin-top.

+0

Gracias por su sugerencia. Terminé usando padding-top y configurándolo en "entrada". Eso pareció funcionar. ¡Gracias! – Amit

+0

@Amit: De nada :) – Sarfraz

+3

@Sarfraz: ¿te importaría eliminar tu odio? y comentarios sobre IE? Ellos no agregan ningún valor a su respuesta, todo lo contrario. ** idiota IE ** tres veces en una publicación - esto me molestó mucho al leer esta respuesta y no debería ser así en stackoverflow, creo. – Oliver

2

¿Usted intentó ?:

input {vertical-align: middle;} 
+0

Sí, probé la alineación vertical. Lo arreglé usando un relleno y aplicándolo al selector de "entrada". ¡Gracias! – Amit

+0

NP, eso habría sido m Primero, supongo, pero pensé que habías dicho que lo intentaste pero parece que habías intentado con el margen, lo siento;) –

2

Sé que éste es un poco viejo, pero yo he encontrado con el mismo problema. La solución dada aquí no me ayudó, lo cual me pareció extraño. En mi caso, fue la altura de la línea que se estableció en "1em". Cambiar la altura de la línea a algo que se asemejara a la altura del cuadro de texto, en lugar del tamaño de la fuente que contenía fue la solución. Esto también continúa funcionando como se espera en Firefox, etc.

+0

Interesante ... Recuerdo haber intentado 'line-height' y que no funcionaba. Gustoso de trabajar para ti :) – Amit

Cuestiones relacionadas