How To Perfectly Align Image Button With HTML Input Textbox Comment aligner parfaitement l'image avec le bouton d'entrée de texte HTML
The form element input with type text strangely refuses to align with an adjacent image button ( input element of type image ). L'élément de formulaire de saisie de type texte étrangement refuse de s'aligner sur un bouton adjacent image (élément input de type image). 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. Le problème est plutôt difficile à résoudre comme des méthodes comme l'utilisation ou la marge d'aligner ou de remplissage ou même d'ajouter des espaces à l'image échoue. Here is a surprisingly simple solution to this problem. Voici une solution étonnamment simple à ce problème. But first lets take a look at the problem. Mais d'abord, permet de jeter un coup d'oeil au problème.
The input textbox above is misaligned with the image button above as you can see. L'entrée de texte ci-dessus était mal aligné avec l'image ci-dessus bouton comme vous pouvez le voir. The code is: Le code est:
The solution is deceptively simple. La solution est simple. Here is the code which works: Voici le code qui fonctionne:
Here is the demo: Voici la démo:
Filed under Classé sous Headline News Headline News , How To Comment , Tech Note Note technique , Web | |
| |
RSS 2.0 RSS 2,0 | |
Trackback this Article | cet article |
Email this Article Envoyer cet article
You may also like to read Vous mai également à lire |





July 19th, 2006 at 10:02 pm Juillet 19th, 2006 at 10:02 pm
what about aligning them both at the middle vertically? qu'en est-il de l'alignement de tous les deux au milieu verticalement?
July 27th, 2006 at 11:44 pm Juillet 27, 2006 at 11:44 pm
align=absmiddle is deprecated. align = absmiddle est obsolète.
Can anyone explain why this behaviour happens, and why position: absolute solves it? Quelqu'un peut-il expliquer pourquoi ce comportement se produit, et pourquoi position: absolute résout-il?
I’m constantly coming across CSS problems but the solutions don’t leave me any the wiser Je suis constamment à venir à travers CSS problèmes, mais les solutions ne pas me laisser tout le sage
August 8th, 2006 at 12:07 pm Août 8th, 2006 at 12:07 pm
Kat: This is probably due to the “image baseline” issue, where there is whitespace at the bottom of an image. Kat: C'est probablement en raison de l ' «image de base" question, où il est blanc au bas d'une image. Since images are inline objects, they sit on the baseline and not at the bottom of the containing block. Depuis les images sont en ligne des objets, ils s'assoient sur la base et non au bas du bloc contenant. Changing the style to “display: block;” would also work in an example like this. Changer le style de "display: block;" aussi travailler dans un exemple comme celui-ci.
November 21st, 2006 at 4:20 pm Novembre 21, 2006 at 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. J'ai été d'essayer cette ive et déterminé que la mise ur éléments dans un tableau, chacun dans une cellule est différent faire l'alignement très bien.
Cause playing wit absolute positioning in a table can end up really messy. Cause jouer esprit de positionnement absolu dans un tableau peuvent se retrouver vraiment désordre.
( normal textbox is setting height and text size from my CSS style sheet ) (Texte normal est en train de mettre la hauteur et la taille de texte de ma feuille de style CSS)
January 5th, 2007 at 9:38 pm 5 janvier 2007 à 9:38 pm
using vertical-align: text-bottom is the best way to achieve the desired effect en utilisant vertical-align: text-bas est le meilleur moyen d'atteindre l'effet désiré
February 1st, 2007 at 9:25 am 1er février 2007 à 9:25 am
Bonjour,
Sous IE6, le bouton Go est 1 pixel au-dessus du input Sous IE6, le bouton Go est de 1 pixel au-dessus du entrée
Tout le monde le voit Tout le monde le voit
June 28th, 2007 at 12:43 am Juin 28th, 2007 at 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 - J'ai utilisé ce à aligner PayPal panier boutons de sorte qu'ils n'ont pas d'incidence sur la mise en page au-dessous d'eux. It’sa problem with PayPal that has been bugging me for ages! Il s'agit d'un problème avec PayPal qui a été sur écoute-moi pour les âges! Thanks. Merci.
November 19th, 2007 at 2:05 am Novembre 19, 2007 at 2:05 am
Bonjour, you can solve the 1 pixel problem easily. Bonjour, vous pouvez résoudre le problème de 1 pixel facilement.
Complete Code: Complete Code:
November 19th, 2007 at 2:10 am Novembre 19, 2007 at 2:10 am
asp:ImageButton ID=\ asp: ImageButton ID = \
May 7th, 2008 at 6:55 am 7 mai 2008 à 6:55 am
Works a charm! Travaux un charme!
May 16th, 2008 at 11:08 pm 16 mai 2008 à 11:08 PM
This has been a booger… Cela a été un booger…
Didn’t work for me. Ne fonctionne pas pour moi.
But I did use style=”vertical-align: middle” which worked like a charm. Mais je ne l'ai utiliser style = "vertical-align: middle" qui a travaillé comme un charme.