How To Perfectly Align Image Button With HTML Input Textbox Cómo alinear perfectamente la imagen con el botón HTML de entrada de texto
The form element input with type text strangely refuses to align with an adjacent image button ( input element of type image ). El formulario de entrada con el tipo de texto extrañamente se niega a alinear con un botón adyacente imagen (elemento de entrada de tipo imagen). The problem is rather hard to solve as regular methods like using align or margin or padding or even adding whitespace to the image fails. El problema es más bien difícil de resolver como los métodos ordinarios como usar o adaptar margen o acolchado, o incluso añadiendo blanco a la imagen falla. Here is a surprisingly simple solution to this problem. Aquí hay una sorprendentemente sencilla solución a este problema. But first lets take a look at the problem. Pero primero permite echar un vistazo al problema.
The input textbox above is misaligned with the image button above as you can see. La entrada de texto de arriba es desalinearse con la imagen como botón de arriba se puede ver. The code is: El código es el siguiente:
The solution is deceptively simple. La solución es engañosamente simple. Here is the code which works: Aquí está el código que funciona:
Here is the demo: Aquí está la demostración:
Filed under Filed under Headline News Headline News , How To Cómo , Tech Note Nota técnica , Web | |
| |
RSS 2.0 RSS 2,0 | |
Trackback this Article | este artículo |
Email this Article Enviar artículo
You may also like to read También puede leer |




July 19th, 2006 at 10:02 pm 19 de julio de 2006, a las 10:02 pm
what about aligning them both at the middle vertically? ¿qué pasa con la armonización de ellos tanto en el medio vertical?
July 27th, 2006 at 11:44 pm 27 de julio de 2006, a las 11:44 pm
align=absmiddle is deprecated. align = absmiddle está obsoleta.
Can anyone explain why this behaviour happens, and why position: absolute solves it? ¿Puede alguien explicar por qué ocurre este comportamiento, y por qué position: absolute resuelve?
I’m constantly coming across CSS problems but the solutions don’t leave me any the wiser Estoy constantemente viene a través de CSS problemas pero las soluciones no dejan ninguna me los sabios
August 8th, 2006 at 12:07 pm Agosto 8, 2006 a las 12:07 pm
Kat: This is probably due to the “image baseline” issue, where there is whitespace at the bottom of an image. Kat: Esto se debe probablemente a la "imagen de referencia", donde hay espacios en blanco en la parte inferior de una imagen. Since images are inline objects, they sit on the baseline and not at the bottom of the containing block. Dado que las imágenes son objetos en línea, se sientan en la línea de base y no en la parte inferior del bloque que contiene. Changing the style to “display: block;” would also work in an example like this. Cambiar el estilo de "pantalla: block;" también trabajo en un ejemplo como este.
November 21st, 2006 at 4:20 pm 21 de noviembre de 2006, a las 4:20 pm
Ive been trying this and ive figured out that puting ur elements in a table, each in a différent cell is doing the alignment very well. He estado tratando este ive y descubrir que la puesta ur elementos en una tabla, cada uno en una celda différent está haciendo la alineación muy bien.
Cause playing wit absolute positioning in a table can end up really messy. Causa de juego ingenio posicionamiento absoluto en una tabla puede acabar realmente desordenado.
( normal textbox is setting height and text size from my CSS style sheet ) (Texto normal es fijar la altura y el tamaño del texto de mi hoja de estilos CSS)
January 5th, 2007 at 9:38 pm 5 de enero de 2007, a las 9:38 pm
using vertical-align: text-bottom is the best way to achieve the desired effect utilizando vertical-se suman: el texto de abajo es la mejor manera de lograr el efecto deseado
February 1st, 2007 at 9:25 am El 1 de febrero de 2007, a las 9:25 am
Bonjour,
Sous IE6, le bouton Go est 1 pixel au-dessus du input Sous IE6, le Bouton Ir de 1 píxel est au-Dessus du entrada
Tout le monde le voit Tout Le Monde Le Voit
June 28th, 2007 at 12:43 am 28 de junio de 2007, a las 12:43 am
Fantastic - I’ve used this to align PayPal shopping cart buttons so they don’t affect the page layout below them. Fantástico - que he usado para alinear este carrito de la compra de PayPal botones de manera que no afectan la distribución de la página debajo de ellos. It’sa problem with PayPal that has been bugging me for ages! Se trata de un problema con PayPal ha sido que me escuchas para las edades! Thanks. Gracias.
November 19th, 2007 at 2:05 am 19 de noviembre de 2007, a las 2:05 am
Bonjour, you can solve the 1 pixel problem easily. Bonjour, puede resolver el problema de 1 píxel fácilmente.
Complete Code: Completar Código:
November 19th, 2007 at 2:10 am 19 de noviembre de 2007, a las 2:10 am
asp:ImageButton ID=\ asp: ImageButton ID = \
May 7th, 2008 at 6:55 am 7 de mayo de 2008 a 6:55 am
Works a charm! Obras un encanto!
May 16th, 2008 at 11:08 pm 16 de mayo de 2008 a 11:08 pm
This has been a booger… Este ha sido un booger…
Didn’t work for me. No trabajo para mí.
But I did use style=”vertical-align: middle” which worked like a charm. Pero yo lo hice uso style = "vertical-se suman: media" que trabajó como un encanto.