CSS控制圖片和文字在同一行顯示且對齊的3種方法
在 HTML 代碼中，有時會需要在文字旁邊加上一個圖標。
默認情況，是圖片置頂對齊，文字置底對齊，所以通常圖片高，文字低，不能水平居中對齊。
常見方法有3種：1、通過添加css的“vertical-align:middle;”；2、如果圖片是背景圖片，可以在css中設置背景圖片；3、把文字和圖片分別放入不同的div中。上面三種方法都可以讓圖片和文字在同一行顯示，下面我們用實例來應用一下。
1、添加上“vertical-align:middle”屬性
我們用“登陸”這個在實際情況做實例，把“登陸”做成圖片，“找回密碼”設置成文字其html代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div > <img src="logo.jpg" alt="" style="vertical-align:middle"><a href="">找回密碼</a> </div> </body> </html>
顯示如下：
2、把圖片設置為背景圖片
如果我們的圖片本身是一個背景圖片的話，可以在css中使用“background”來設置該圖片，html代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .haokan{ width: 300px; height: 50px; line-height: 50px; background-color: red; background: url(logo.jpg) no-repeat left center; } .haokan a{ display: block; margin-left: 116px; } </style> </head> <body> <div class="haokan"> <a href="">找回密碼</a> </div> </body> </html>
同樣顯示如下：
3、分別把圖片和文字放入不同的div中，html代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .divs .imgs{ display: inline-block; vertical-align: middle; } .divs .infos{ display: inline-block; } </style> </head> <body> <div class="divs"> <div class="imgs"><img src="logo.jpg" alt=""></div> <div class="infos"><a href="">找回密碼</a></div> </div> </body> </html>
顯示如下：
-------------------------------------------------------------------------------------------------------------------------------------
建議使用第一種方法。
完
轉載需注明轉載字樣，標注原作者和原博文地址。
關注微信公眾號獲得及時推送
