css设置span和img垂直居中（设置line-height失效）
我要实现下图的样⼦，币种和旗⼦都是垂直居中,⽅法很简单，给img设置vertical-align:middle.在⽗容器上设置上line-height，效果如下
要实现span垂直居中，代码如下:
<style>
.flag{
position: absolute;
bottom: 0;
width: 23rem;
height: 2.5rem;
line-height: 2.5rem;
}
.flag img{
width: 1.58rem;
height: 2.1rem;
vertical-align: middle;css设置文字垂直居中
}
</style>
<div class="flag">
<img src="./img/flag.png">
<span>币种:...</span>
</div>
解释⼀下这么写的原因:
img是⾏内元素，会带有默认样式vertical-align:baseline
vertical-align是指定⾏内元素(inline)垂直对齐⽅式的(⽬前只有图⽚⽀持vertical-align属性，默认属性值是baseline，所以会导致图⽚产⽣⼀个3px左右的下边距，解决⽅法就是给vertical-align设置⾮baseline的内容)
官⽹解释vertical-align:baseline，使元素的基线与⽗元素的基线对齐;
⽗元素的基线，实际上解释的⽐较模糊，我的理解是⽗元素基线在⽗容器底部附近，但是还没有完全到底;
我理解的：设置baseline的元素会影响周边⾏内元素，让baseline元素和周边元素都处于容器底部偏上⼀点点的基线位置
所以会出现这种情况，币种位于底部，即使设置了line-height也⽆法是币种垂直居中
解决⽅法：给旗⼦设置vertical-align:middle让旗⼦垂直居中，然后给⽗容器设置line-height让币种垂直居中
以上理解，如有错误，欢迎指正

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。