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

作者:橙子时间:2026-10-22 17:02:53浏览:69

在使用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位置不居中问题的完整方法,供各位开发者参考使用,欢迎支持。

作者最新文章