代码如下
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
.box{
margin: 40px;
height: 100px;
width: 600px;
background: skyblue;
line-height: 100px;
}
span{
margin-left: 30px;
}
</style>
</head>
<body>
<div class="box">
<img src="" width="40px" height="40px">
<span>这是内嵌文字</span>
</div>
</body>
</html>问题：
在业务中，会遇到这种情况，设置成上面的样式时，图片和文字不能居中，这时想通过设置img元素的margin高来时图片居中。但是调节img的时候，发现文字和img同时移动，这就很尴尬。、
解决方法：
最后解决的是将img元素设置样式
vertical-align: top;这样就可以对img元素进行margin设置的同时，不影响文字的布局。
这样做的原因：
如果不加
vertical-align:top那在box元素里设置line-height后，img和文字是按照同一个基线进行布局的。这就导致当img的位置进行相应改变时，文字也会进行相应的改变，会随着img动而动。如果给img设置vertical-align: top;后，那么img的基线就是box盒子的上方了，不和文字的基线一样了，这样就可以改变img的位置的同时，文字不会发生位置变化。从而进行位置调节使得img和文字一起在box盒子里上下居中。
总结：
对CSS样式的深刻理解将会让你的前端之路如虎添翼。加油吧少年！
909
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
