现在的网站一般字体大小都是 12px，在 12px 下单选框和复选框与文本垂直居中对不齐，解决方法有很多，今天我整理了下最常用的 3 种方法。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta name="renderer" content="webkit"/> <meta name="keywords" content=""/> <meta name="description" content=""/> <title>radio-and-checkbox-and-text-vertical-align</title> <link rel="stylesheet" href="css/main.css"/></head><body> <div class="demo"> <h2>单选框</h2> <p><input type="radio" name="radio" id="radio1" class="input1"/><label for="radio1">解决方法一</label></p> <p><input type="radio" name="radio" id="radio2" class="input2"/><label for="radio2">解决方法二</label></p> <p><input type="radio" name="radio" id="radio3" class="input3"/><label for="radio3">解决方法三</label></p> <h2>复选框</h2> <p><input type="checkbox" name="checkbox" id="checkbox1" class="input1"/><label for="checkbox1">解决方法一</label></p> <p><input type="checkbox" name="checkbox" id="checkbox2" class="input2"/><label for="checkbox2">解决方法二</label></p> <p><input type="checkbox" name="checkbox" id="checkbox3" class="input3"/><label for="checkbox3">解决方法三</label></p> </div></body></html>
@charset "utf-8";@import "core/config";@import "core/reset";.demo { margin:50px; font-size:12px; font-family:SimSun; h2 { font-size:20px; } p { margin:20px; input { margin-right:5px; } .input1 { height:13px; margin-top:0; vertical-align:text-top; } .input2 { margin-top:-2px; vertical-align:middle; } .input3 { vertical-align:-3px; } }}
测试浏览器：chrome，firefox，ie7-10
参考资料： 复选框单选框与文字对齐问题的研究与解决
收藏
收藏
收藏
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
0
42
![ThinkPHP5实战之[教学管理系统]](https://img.php.cn/upload/course/000/000/068/6253d87459486427.png)
