How To Perfectly Align Image Button With HTML Input Textbox Como alinhar perfeitamente a imagem botão com texto HTML input
The form element input with type text strangely refuses to align with an adjacent image button ( input element of type image ). O formulário de entrada em elemento tipo texto estranhamente se recusar a alinhar com uma imagem adjacente botão (entrada elemento do tipo imagem). 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. O problema é bastante difícil de resolver como regular alinhar ou utilizando métodos como a margem ou padding ou mesmo adicionando branco para a imagem falhar. Here is a surprisingly simple solution to this problem. Aqui está um surpreendentemente simples solução para este problema. But first lets take a look at the problem. Mas primeiro vamos dar uma olhada na problema.
The input textbox above is misaligned with the image button above as you can see. A entrada texto acima é desalinhado com a imagem botão acima, como pode ver. The code is: O código é:
The solution is deceptively simple. A solução é deceptively simples. Here is the code which works: Aqui está o código que funciona:
Here is the demo: Aqui está a demonstração:
Filed under Arquivado em Headline News Headline News , De How To How To , De Tech Note Nota Tech , De Web | |
| |
RSS 2.0 RSS 2,0 | |
Trackback this Article | este artigo |
Email this Article E-mail este artigo
You may also like to read Você pode também gosta de ler |




July 19th, 2006 at 10:02 pm 19 de julho de 2006 em 10:02 pm
what about aligning them both at the middle vertically? alinhando-os sobre o que os dois ao meio verticalmente?
July 27th, 2006 at 11:44 pm 27 de julho de 2006 em 11:44 pm
align=absmiddle is deprecated. alinhar = absmiddle está obsoleta.
Can anyone explain why this behaviour happens, and why position: absolute solves it? Alguém pode explicar porque é que este comportamento acontece, e porquê posição: absoluto resolve-lo?
I’m constantly coming across CSS problems but the solutions don’t leave me any the wiser Eu estou constantemente próximos CSS problemas, mas em toda a soluções não deixe-me a qualquer sábia
August 8th, 2006 at 12:07 pm 8 de agosto de 2006 em 12:07 pm
Kat: This is probably due to the “image baseline” issue, where there is whitespace at the bottom of an image. Kat: Este é provavelmente devido à "imagem base" tema, onde há espaço na parte inferior de uma imagem. Since images are inline objects, they sit on the baseline and not at the bottom of the containing block. Uma vez que as imagens são inline objetos, eles têm assento na linha de base e não na parte de baixo da contendo bloco. Changing the style to “display: block;” would also work in an example like this. Mudar o estilo de "display: block;" seria também trabalhar em um exemplo como este.
November 21st, 2006 at 4:20 pm 21 de novembro, 2006 em 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. Ive sido tentar esta iniciativa e colocando-se que figurava ur elementos em uma tabela, cada um em uma cela différent está a fazer o alinhamento muito bem.
Cause playing wit absolute positioning in a table can end up really messy. Causa jogando wit posicionamento absoluto em uma tabela pode acabar realmente desorganizados.
( normal textbox is setting height and text size from my CSS style sheet ) (Texto normal está a altura eo tamanho do meu texto folha de estilos CSS)
January 5th, 2007 at 9:38 pm 5 de janeiro de 2007 em 9:38 pm
using vertical-align: text-bottom is the best way to achieve the desired effect utilizando vertical-align: texto-base é o melhor caminho para alcançar o efeito desejado
February 1st, 2007 at 9:25 am 1 de fevereiro de 2007 em 9:25 am
Bonjour,
Sous IE6, le bouton Go est 1 pixel au-dessus du input Sous IE6, est le bouton Go 1 pixel au-dessus du input
Tout le monde le voit Tout le monde le Voit
June 28th, 2007 at 12:43 am 28 de junho de 2007 em 12:43 am
Fantastic - I’ve used this to align PayPal shopping cart buttons so they don’t affect the page layout below them. Fantastic - Eu tenho usado essa a alinhar a PayPal carrinho de compras botões para que eles não afetam o layout da página abaixo deles. It’sa problem with PayPal that has been bugging me for ages! É um problema com PayPal que tem sido bugging me para idades! Thanks. Obrigado.
November 19th, 2007 at 2:05 am 19 de novembro de 2007 em 2:05 am
Bonjour, you can solve the 1 pixel problem easily. Bonjour, você pode resolver o problema facilmente 1 pixel.
Complete Code: Complete Código:
November 19th, 2007 at 2:10 am 19 de novembro de 2007 em 2:10 am
asp:ImageButton ID=\ asp: ImageButton ID = \
May 7th, 2008 at 6:55 am 7o maio, 2008, 6:55 am
Works a charm! Trabalha um charme!
May 16th, 2008 at 11:08 pm 16 de maio, 2008, 11:08 pm
This has been a booger… Este tem sido um booger…
Didn’t work for me. Não funcionou para mim.
But I did use style=”vertical-align: middle” which worked like a charm. Mas eu fiz uso style = "vertical-align: meio", que trabalhou como um encanto.