解决Layui数据表格中checkbox位置不居中的方法

作者:橙子

时间:2026-10-22

浏览:68

在使用Layui进行方法渲染数据表格时,若添加checkbox发现其未垂直居中,可通过引入特定CSS样式解决。核心代码为设置.layui-table-cell .layui-form-checkbox[lay-skin="primary"]的top为50%并配合transform: translateY(-50%)实现垂直居中效果。

文章目录

Layui数据表格checkbox居中问题

1、情景

在使用方法渲染方式生成数据表格并添加checkbox时,可能会遇到checkbox位置无法垂直居中的问题,具体表现可参考相关截图。

Layui数据表格checkbox居中问题

2、解决办法

参考Layui官方社区的解决方案,只需添加特定的CSS样式即可修复该显示问题。


.layui-table-cell .layui-form-checkbox[lay-skin="primary"]{
  top: 50%;
  transform: translateY(-50%);
}

以上即为解决Layui数据表格中checkbox位置不居中问题的完整方法,供各位开发者参考使用,欢迎支持。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章