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="" ><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>
cssclass属性<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>
显⽰如下：
-------------------------------------------------------------------------------------------------------------------------------------建议使⽤第⼀种⽅法。
完
转载需注明转载字样，标注原作者和原博⽂地址。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。