How To Perfectly Align Image Button With HTML Input Textbox画像のボタンを配置する方法を完全にHTML入力のTextBox
The form element input with type text strangely refuses to align with an adjacent image button ( input element of 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.この問題を解決するためにはかなりのハードとしてのような定期的なメソッドを使用して配置やマージンやパディングまたは空白を追加しても画像が失敗します。 Here is a surprisingly simple solution to this problem.次に示すのは、この問題の解決策を驚くほど簡単です。 But first lets take a look at the problem.しかし、最初のでは、この問題を見ています。
The input textbox above is misaligned with the image button above as you can see.歯並びの悪いとは、入力テキストボックスの上には上のボタンをクリックとしてのイメージを参照することができます。 The code is:このコードは:
The solution is deceptively simple.コロンブスの卵の解決策は単純です。 Here is the code which works:ここでは、コードを著作物:
Here is the demo:ここでは、デモ:
Filed under提出されて Headline Newsニュースの見出し , 、 How Toどのように , 、 Tech Note技術のノート , 、 Webウェブ | |
| |
RSS 2.0 RSS 2.0を | |
Trackbackトラックバック this Article |この記事|
Email this Article電子メールこの記事
You may also like to readを読むようにすることも可能 |





July 19th, 2006 at 10:02 pm 2006年7月19日は10:02 pmの
what about aligning them both at the middle vertically?どのようなことについては、両方の真ん中を縦に合わせですか?
July 27th, 2006 at 11:44 pm 2006年7月27日11:44 pmの
align=absmiddle is deprecated.整列= absmiddleが推奨されていません。
Can anyone explain why this behaviour happens, and why position: absolute solves it?この動作は、誰が起こる理由を説明し、なぜ位置:絶対的な解決ですか?
I’m constantly coming across CSS problems but the solutions don’t leave me any the wiser私は常に問題に出くわすが、ソリューションのCSS置いていかないで任意の賢明な
August 8th, 2006 at 12:07 pm 2006年8月8日の12:07 pmの
Kat: This is probably due to the “image baseline” issue, where there is whitespace at the bottom of an image.キャット:これはおそらくのために、 "イメージのベースライン"の問題は、どこには空白の下部には、イメージです。 Since images are inline objects, they sit on the baseline and not at the bottom of the containing block.画像は、インラインオブジェクト以来、彼らのベースラインに座って、その情報を含む特定の下部にブロックします。 Changing the style to “display: block;” would also work in an example like this.のスタイルを変更して"表示:ブロック; "で働く例もまたこのようです。
November 21st, 2006 at 4:20 pm 2006年11月21日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.私もこれとアイブしようと考え出したの要素をテーブルに置く出典は、各セルがdifférentにすることは非常によく配置します。
Cause playing wit absolute positioning in a table can end up really messy.絶対的なポジショニングの原因機知に富んだプレーでは、テーブルに終わること本当におかしくなりがちです。
( normal textbox is setting height and text size from my CSS style sheet ) (通常のテキストボックスは、設定の高さと文字の大きさから私のCSSスタイルシート)
January 5th, 2007 at 9:38 pm 2007年1月5日は午後9時38分
using vertical-align: text-bottom is the best way to achieve the desired effectを使用して垂直に整列:テキストの下には、最善の方法を達成するために、目的の効果
February 1st, 2007 at 9:25 am 2007年2月1日は午前9時25時
Bonjour, Bonjourのは、
Sous IE6, le bouton Go est 1 pixel au-dessus du inputスー800 、ル神経繊維末端には1ピクセルau - dessusデュ入力
Tout le monde le voit toutルモンドルボイト
June 28th, 2007 at 12:43 am 2007年6月28日12:43アム
Fantastic - I’ve used this to align PayPal shopping cart buttons so they don’t affect the page layout below them.素晴らしい-私はこれに合わせて使用されるペイパルのショッピングカートのボタンがあるので、ページのレイアウトはありませんの下に影響を与えることです。 It’sa problem with PayPal that has been bugging me for ages!これはPayPalの問題が盗聴されてきた私の年齢! Thanks.ありがとう。
November 19th, 2007 at 2:05 am 2007年11月19日の午前5:35
Bonjour, you can solve the 1 pixel problem easily. Bonjourのは、問題を回避することができます簡単に解決するために1ピクセルです。
Complete Code:完全なコード:
November 19th, 2007 at 2:10 am 2007年11月19日は2:10アム
asp:ImageButton ID=\のASP : imagebutton番号= \
May 7th, 2008 at 6:55 am 2008年5月7日6:55アム
Works a charm!の作品が魅力的!
May 16th, 2008 at 11:08 pm 2008年5月16日11:08 pmの
This has been a booger…これは、鼻くそ…
Didn’t work for me.仕事をしなかったよ。
But I did use style=”vertical-align: middle” which worked like a charm.しかし、私は使用するスタイル= "垂直-整列:真ん中"という魔法のように働いています。