css span img,css设置span和img垂直居中(设置line-height失效)

我要实现下图的样子,币种和旗子都是垂直居中,方法很简单,给img设置vertical-align:middle.在父容器上设置上line-height,效果如下

316225b9858dbc38c56c28dbced9edb5.png

要实现span垂直居中,代码如下:

.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;

}

flag.png

币种:...

解释一下这么写的原因:

img是行内元素,会带有默认样式vertical-align:baseline

vertical-align是指定行内元素(inline)垂直对齐方式的(目前只有图片支持vertical-align属性,默认属性值是baseline,所以会导致图片产生一个3px左右的下边距,解决方法就是给vertical-align设置非baseline的内容)

官网解释vertical-align:baseline,使元素的基线与父元素的基线对齐;

父元素的基线,实际上解释的比较模糊,我的理解是父元素基线在父容器底部附近,但是还没有完全到底;

我理解的:设置baseline的元素会影响周边行内元素,让baseline元素和周边元素都处于容器底部偏上一点点的基线位置

所以会出现这种情况,币种位于底部,即使设置了line-height也无法是币种垂直居中

3f9da316b6b52063573a07a01c7a5bd5.png

解决方法:给旗子设置vertical-align:middle让旗子垂直居中,然后给父容器设置line-height让币种垂直居中

4ceb36bc567f737d773343ca68a6db1c.png

以上理解,如有错误,欢迎指正

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值