css中使input輸入框與img(圖片)在同一行居中對(duì)齊
發(fā)布時(shí)間：2013-10-09 15:01:51 作者：佚名 
我要評(píng)論
我要評(píng)論如何讓input輸入框與img在同一行居中對(duì)齊，由于經(jīng)常會(huì)使用到，默認(rèn)情況下將input和img放同一行，img標(biāo)簽總是比input高出一個(gè)頭，很難看，大家可以參考下本文或許有所幫助
將input和img放同一行，img標(biāo)簽總是比input高出一個(gè)頭，難看。后來(lái)在網(wǎng)站搜到最多的就是給img添加一個(gè)align="absmiddle"屬性，這個(gè)方法似乎的確可行，但是不符合HTML標(biāo)準(zhǔn)。后來(lái)發(fā)現(xiàn)同時(shí)給input和img添加vertical-align:middle就行：
在寫css時(shí)，使得input和img在同一行居中對(duì)齊的方法：
復(fù)制代碼
代碼如下:img{vertical-align:middle;}
input{width:寬度;height:高度;line-height:與高度一致;margin:0px;padding;0px;font-size:字體大小;border:邊框;vertical-align:center;}
或直接這樣寫
復(fù)制代碼
代碼如下:input,img{vertical-align:middle;}
相關(guān)文章
CSS實(shí)現(xiàn)同一行的圖片和文字垂直居中對(duì)齊的方法
這篇文章主要為大家介紹了CSS實(shí)現(xiàn)同一行的圖片和文字垂直居中對(duì)齊的方法,涉及css中vertical-align:middle屬性的使用技巧,需要的朋友可以參考下2015-05-12CSS解決文字與圖片不能水平居中對(duì)齊的問(wèn)題
在文字旁邊加上一個(gè)圖標(biāo)，通過(guò)css如何解決文字與圖片不能水平居中對(duì)齊的問(wèn)題，下面有個(gè)示例，大家可以參考下2014-05-31- 垂直居中對(duì)齊在網(wǎng)頁(yè)布局中非常實(shí)用，下面有段css代碼，個(gè)人感覺還不錯(cuò)，大家可以參考下2014-02-08
通過(guò)css使用background-color為背景圖添加遮罩效果的兩種方法
這篇文章主要介紹了通過(guò)css使用background-color為背景圖添加遮罩效果的兩種方法,需要的朋友可以參考下2018-07-12SCSS移動(dòng)端頁(yè)面遮罩層效果的實(shí)現(xiàn)及常見問(wèn)題解決
這篇文章主要介紹了SCSS移動(dòng)端頁(yè)面遮罩層效果的實(shí)現(xiàn)及常見問(wèn)題解決,使用CSS的預(yù)處理器框架SCSS寫起來(lái)比原生CSS會(huì)來(lái)得更加簡(jiǎn)便一些,需要的朋友可以參考下2016-06-09
css遮罩全屏居中對(duì)齊的實(shí)現(xiàn)方式
本文通過(guò)實(shí)例代碼給大家介紹了css遮罩全屏居中對(duì)齊的實(shí)現(xiàn)方式，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-07-16
