怎样让这个图片和这个文字水平对齐？？

251419392

6193110192

发布于
2017-07-26

这个图和文字没有水平对齐我想让它们水平对齐但是我调sp2的margin-top或者line-height的时候这个图片也一直跟着移动这是为什么？那么怎么调整才能让这两个水平对齐呢？

图片描述
下面是这个图片大家可以试一下

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./iconfont.css">
<title></title>
<style type="text/css">
#div1{width: 200px;height: 40px;}
#sp1{width: 20px;height: 20px;display: inline-block;}
#sp1 img{width: 100%;height: 100%}
#sp2{height: 20px;display: inline-block;}
</style>
</head>
<body>
<div id="div1">
    <span id="sp1"><img src="sousuo.png"></span>
    <span id="sp2">搜索</span>
</div>
</body>
</html>

css html

html5

阅读 25.8k

6 个回答

给sp1,sp2都加vertical-align: middle就可以了

xiatianlong

2.2k43054

发布于
2017-07-26

html:

<div id="div1">
    <img src="1117994955-5978930fb8e64.png">
    <span id="sp2">搜索</span>
</div>

css:

#div1{
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}
#div1 > img{
    height: 20px;
    width: auto;
}
#div1 > #sp2{
    display: inline-block;
    padding-left: 10px;
}

lengziyu

74551524

发布于
2017-07-26