Input標簽與圖片按鈕水平對齊解決方法
發(fā)布時間：2013-06-28 12:51:05 作者：佚名 
我要評論
我要評論在日常的網頁制作當中，我們可能會遇到input標簽與圖片在同一行的情況，這時候你會發(fā)現，無論你的css怎么寫都會出現input文本框與圖片鏈接無法在同一水平線上
昨日，小編的朋友就來咨詢，說他也遇到了這個問題，并且使用margin、padding等Css語法，都沒有解決。
解決方法其實很簡單，我們只要加上vertical-align:middle屬性就可以了。
來看實例：
提示：您可以先修改部分代碼再運行
頁面直接擺放一個input文本框與ImageButton圖片按鈕，但是發(fā)現沒有對齊：
復制代碼
代碼如下:<input type="text" id="txtQty" />
<asp:ImageButton ID="IBtnBuy" runat="server" />
如圖所示
其實只要給圖片按鈕添加一個css屬性就可以：
復制代碼
代碼如下:<asp:ImageButton ID="IBtnBuy" runat="server" CssClass="btnImg" />
.btnImg{ vertical-align:middle; }
這樣就對齊了：
相關文章
css中圖片于文本的基線對齊與vertical-align屬性設置
默認的情況是圖片頂對齊而文字底對齊，通過設置css屬性可以使得圖片與文字對齊，接下來為大家詳細介紹下設置各對象的vertical-align屬性，感興趣的朋友可以參考下哈2013-04-02css 垂直對齊 css中vertical-align屬性(垂直對齊)的使用說明
這兩天寫個頁面css的時候用到了vertical-align屬性，使用過程中踩到了坑,因此整理了一些，以備不時之需，感興趣的朋友可以了解下哦2013-01-09css vertical-align屬性的一些理解與認識(二) text-top篇
vertical-align是個相當復雜與精深的屬性，所理解的一些內容多少會有不準確之處,本集內容主要講講我對在一般情況下vertical-align其作用的理解，以及vertical-align相關的2013-01-07css vertical-align屬性的一些理解與認識(一)
就說說我對vertical-align屬性的一些理解吧，純屬個人見解，若有不準確之處還望見諒,若有不準確之處還望見諒。還有，vertical-align屬性牽扯到的知識實在是太多了，不是一2013-01-07line-height 和 vertical-align 行高與行對齊精解 （圖文）
行高指的是文本行的基線間的距離，但是文本之間的空白距離不僅僅是行高決定的， 同時也受字號的影響。2010-08-27- div vertical-align不起作用解決辦法，其實主要是文檔聲明。2010-03-25
- 最近的項目涉及到很多表單的制作，特別是復選框(checkbox)和單選框(radio)。但是在前端開發(fā)過程中發(fā)現，單(復)選框和它們后面的提示文字在不進行任何設置的情況下，是無法2009-07-29
- 網頁制作Webjx文章簡介：最近幾天仔細研究了一下vertical-align這個屬性，結果讓我大吃一驚，這個很“資深”的CSS標準竟然在各個瀏覽器里面的表現都各不相同。2009-04-02
- 網頁制作Webjx文章簡介：CSS實例:vertical-align屬性讓網頁層居中. vertical-align屬性使網頁層居中 網頁源代碼如下： <html> <2009-04-02
- vertical-align屬性詳細分析 最近幾天仔細研究了一下vertical-align這個屬性，結果讓我大吃一驚，這個很“資深”的CSS標準竟然在各個瀏覽器里面的表現都各不相同2009-02-10