朋友问了我一个问题，看似很简单的问题，文本无法垂直对齐。效果如图
problem.png
样式部分
style.png
dom节点
dom.png
code
code.png
解决方案
首先让尝试了
vertical-align: middle;
无效
其次尝试了
display: inline-block:
height: 30px;
line-height: 30px;
无效
然后
display: flex;
align-items: center;
无效
因为未对齐部分是在同一个span节点内 所以没有尝试
// 父元素
font-size: 0;
// 子元素
font-size: 16px;
// 这种方案应该不能解决该问题 只是想到了vertical对齐问题，提一下图片文字对齐问题可以用此方案解决
最后尝试性的改了一下span的font-family 果然是font-family造成的无法对其，随后跟产品沟通可以更换字体，于是改了个font-family解决了
如果不改字体的话 还真没想到什么其他好的方案
谨以此文献给正在开发岗位上奋斗爬坑的有志青年! 共勉
网友评论