代码如下
<!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样式的深刻理解将会让你的前端之路如虎添翼。加油吧少年!