单选框和复选框与文本垂直对齐_html/css

单选框和复选框与文本垂直对齐_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:29:30

Original

1696 people have browsed it

现在的网站一般字体大小都是 12px，在 12px 下单选框和复选框与文本垂直居中对不齐，解决方法有很多，今天我整理了下最常用的 3 种方法。

html 结构：

<!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>

Copy after login

scss：

@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;        }    }}

Copy after login

效果如图所示：

测试浏览器：chrome，firefox，ie7-10

参考资料：复选框单选框与文字对齐问题的研究与解决