一. 问题描述
同一个父标签内span标签的文字与图片(img标签)不对齐。
CSS代码:
.father{
background-color: orange;
height: 60px;
}
span{
display: inline-block;
height: 20px;
background-color: green;
}
img{
width: 60px;
height: 40px;
}
HTML代码:
<div class="father">
<span >文本</span>
<img src="./img/bg01.jpg" />
</div>
运行结果:
二. 解决方法(使用vertical-align属性)
(1)想要效果:文本元素和图片元素顶部对齐。
方法:在span标签上设置属性 vertical-align: top;
效果:
(也可以给span和img标签设置float属性达到效果)
(2)想要效果:文本元素和图片元素中间对齐。
方法:在img标签上设置属性 vertical-align: middle;
效果:
(3)想要效果:文本元素和图片元素底部对齐。
方法:在img标签上设置属性 vertical-align: bottom;
效果: