场景

当文字字体在12px时，文字相对于单选框和复选框的位置是偏下的！（谷歌浏览器）

截图

示例

解决方案

方案一

    input[type="radio"], input[type="checkbox"] {
      vertical-align: middle;
      margin-top:-2px;
      margin-bottom:1px;
    }

方案二

input[type="radio"], input[type="checkbox"] {
      vertical-align:-2px;
}

我在浏览器测试中 “-2px”看起来更舒服点。

参考资料

复选框或单选框与文字对齐的问题

单选框与复选框对齐问题
场景当文字字体在12px时，文字相对于单选框和复选框的位置是偏下的！（谷歌浏览器）截图解决方案方案一方案...
2017-11-07【复选框、单选框与文字不对齐】
今日总结了一下表单元素的对齐和某些处理的情况：文字加不加label都一样。为什么单选框、复选框与文字不对齐呢？...
单选框复选框与文字不对齐怎么办
一般情况下，导致该现象的原因是，单选框或者复选框与文字的对齐方式默认是vertical-align:baselin...
《GUI设计禁忌》2.1 使用了错误的控件
2.1.1 复选框和单选框 1：错把复选框当做单选框2：错把单选框当做复选框当位置有限时，可以用以下方式替代...
Jquery iCheck
表单复选框、单选框控件美化插件主要作用为: 渲染并美化当前页面的复选框或单选框响应复选框或单选框的点击事件页...
单选钮与文字不对齐解决方法
单选和复选框与文字不对齐解决方法:
Egret eui学习
eui 按钮、单选框、复选框用法学习
Flutter 学习之旅(二十四) Switch Chec
Material 组件库中提供了单选框 Switch 与复选框 Checkbox ,并且虽然他们都是集成自St...
字节跳动小程序【开发】自学总结2
关于表单复选框与单选框添加事件通过在checkbox-group和radio-group上添加bindchange...
4.基础操作方法2
selenium_day_4 1.单选框和复选框单选框 type:radio定位-->点击判断是否被选中元素....