处理行内样式img与字体不对齐

在行内样式中, 使用 img 做为小图标时常出现字体与图片不能居中对齐的问题


原因页面渲染时, img 标签的底部与字体的 baseline 对其


不考虑flex等需要增加dom的方案外

1|0处理方式1

flex 等可以强行剧情的布局

缺点是需要改变布局和增加 dom

2|0处理方式2

img { vertical-align: middle }

可见的是对于英文字符, 较为对其, 但对于中文效果不佳
原因是与英文字体而言中文字体的整体图形位置偏上

3|0处理方式3

img { width: 1em; height: 1em; vertical-align: -0.15em; }

效果较为理想


__EOF__

本文作者Odyssey
本文链接https://www.cnblogs.com/qingzhao/p/16978100.html
关于博主:I am a good person
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   --Odyssey--  阅读(246)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
点击右上角即可分享
微信分享提示