在 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>
顯示如下：
-------------------------------------------------------------------------------------------------------------------------------------
建議使用第一種方法。
完
轉載需注明轉載字樣，標注原作者和原博文地址。