明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

怎么使用vertical-align讓input元素與img元素對齊

發(fā)表時間：2024-05-06 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]這次給大家?guī)碓鯓邮褂胿ertical-align讓input元素和img元素對齊，使用vertical-align讓input元素和img元素對齊的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。我們知道，如果將input和img放同一行，img標(biāo)簽總是比input高出一個頭，非常難看。之前試過...
這次給大家?guī)碓鯓邮褂?a target="_blank">vertical-align讓input元素和img元素對齊，使用vertical-align讓input元素和img元素對齊的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。

我們知道，如果將input和img放同一行，img標(biāo)簽總是比input高出一個頭，非常難看。之前試過好多方法，都不行。后來在網(wǎng)站搜到最多的就是給img添加一個align="absmiddle"屬性，這個方法似乎的確可行，但是不符合HTML標(biāo)準(zhǔn)。后來無意中發(fā)現(xiàn)同時給input和img添加vertical-align:middle就行：

代碼如下:

input,img{vertical-align:middle;}

這樣代碼就會規(guī)規(guī)矩矩地水平對齊了。

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

type="file"的input框樣式應(yīng)該如何操作

HTML中head頭結(jié)構(gòu)應(yīng)該如何使用

怎樣利用iframe讓自己的網(wǎng)頁可以顯示天氣

以上就是怎樣使用vertical-align讓input元素和img元素對齊的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。