layui折叠面板标题居中需用CSS覆盖,默认类.layui-colla-title设text-align:center;若仅局部生效,可加自定义class如.my-collapse .layui-colla-title;同时调整padding保持图标与文字垂直居中,必要时用!important提升权重。

layui折叠面板(layui-collapse)默认标题文字是左对齐的,要让标题文字居中,需通过 CSS 覆盖其默认样式,不能依赖 JavaScript 配置项。
用 CSS 直接控制标题文字对齐
折叠面板的标题使用 .layui-colla-title 类,它本质是一个块级元素(如 h2),内部文字对齐由 text-align 控制。只需添加以下样式即可:
- 确保你的 CSS 文件在
layui.css之后加载,否则可能被覆盖 - 写法示例(全局生效):
.layui-colla-title { text-align: center; } - 若只想某一个面板标题居中,可给外层
.layui-collapse加自定义 class,再精准选择:
.my-collapse .layui-colla-title { text-align: center; }
处理图标与文字的垂直居中问题
标题左侧有折叠箭头图标,默认会因行高或 padding 导致视觉偏移。为保持整体居中效果,建议同步设置:
- 统一上下内边距:
.layui-colla-title { padding: 12px 15px; text-align: center; } - 避免图标“下沉”:确保父容器未设
line-height过小或vertical-align干扰(该元素不是 inline,无需设 vertical-align)
配合皮肤或主题时的注意事项
如果用了 skin: 'theme' 或自定义主题,部分样式可能重置了 text-align。此时需提高 CSS 权重:
- 加
!important(仅当必要时):
.layui-colla-title { text-align: center !important; } - 不推荐全局改
h2标签样式,容易影响其他区域











