icon图标和文字对不齐（已解决）

牧之_

于 2020-11-15 19:27:33 发布

阅读量7.2k

点赞数 19

本文链接：https://blog.youkuaiyun.com/qq_43446007/article/details/109708066

版权

在LayUI模板开发中遇到按钮内图标与文字对齐问题，通过给图标元素添加`vertical-align:-10%;`样式可以解决强迫症般的对齐困扰。具体实现是在`<i>`标签中加入此样式，使得图标与文字完美对齐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在用LayUI模板写项目，btn中的icon和文字总是对不齐
在这里插入图片描述

百度了一下找到了一个好用的办法，给icon加上属性：
vertical-align: -10%;

 <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add">
<i class="fa fa-plus" style="vertical-align: -10%;"></i>
添加
</button>

这样就可以啦（该死的强迫症）
在这里插入图片描述