css - 关于 Material Icons 对齐问题？

查看：149 发布时间：2017/9/5 20:02:00 css iconfont

本文介绍了css - 关于 Material Icons 对齐问题？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题

google 的 Material Icons 无法与横向文字对齐。

下面是与 Awesome Icons 的对比。（同样的 css ）

下面是 Material Icons 和 Awesome Icons 的计算结果

vertical-align 并不能解决问题。

有人遇到这种情况吗？请问是如何解决的？

解决方案

查询了 stackoverflow 和 material design icons 的 Issues ，发现这个问题普遍存在，google的团队貌似已经准备要改进。

这个问题没有一个统一的解决方案，需要根据自己的 css 制定不同的方案。经过测试，我发现一个应该可以涵盖大部分使用 reset css 或者ui框架的比较好解决方案：

.material-icons {
...
display: inline-block;
font-size: inherit;
line-height: inherit;
vertical-align: middle;
transform: translateY(-.1em);
...
}

其他的解决方案，stackoverflow 和 Issues 也给出了无数种，主要是根据自己的 css 制定合适的方案。

这篇关于css - 关于 Material Icons 对齐问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文