HTML中让img和span中的文字保持同一水平线

HTML中让img和span中的文字保持同一水平线

<div style="line-height: 40px;>
	<img src="${pageContext.request.contextPath}/image/logo.jpg"  style="width:80px;height:60px;">
	<span style="font-size: 20px;font-weight:bold;">后台管理</span>
</div>

img使用vertical-align：middle：
或者
img使用display：inline-block;

display：flex;

<div style="line-height: 40px;>
	<img src="${pageContext.request.contextPath}/image/logo.jpg"
	        style="width:80px;height:60px;vertical-align: bottom;">
	<span style="font-size: 20px;font-weight:bold;">后台管理</span>
</div>

img和span中的文字底部对齐

vertical-align: bottom;

img和span中的文字顶部对齐

vertical-align: -webkit-baseline-middle;

还有多个属性

可以自己尝试一下其中不同