【css】单选框和复选框文字垂直居中问题

最新推荐文章于 2021-11-16 19:27:29 发布

会做饭的技术男

最新推荐文章于 2021-11-16 19:27:29 发布

阅读量445

点赞数

分类专栏：前端文章标签： css checkbox radio vertical-align input 垂直居中

原文链接：https://www.mk2048.com/blog/blog.php?id=h1jakh0j2a1j&title=%E3%80%90css%E3%80%91%E5%8D%95%E9%80%89%E6%A1%86%E5%92%8C%E5%A4%8D%E9%80%89%E6%A1%86%E6%96%87%E5%AD%97%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E9%97%AE%E9%A2%98

版权

前端专栏收录该内容

2507 篇文章 13 订阅

订阅专栏

现在的网站一般字体大小都是 12px，在 12px 下单选框和复选框文字垂直居中对不齐，不过要是字体大小是 14px 的话却完全没有这个问题。下面我整理了下解决方法，总共有 6 种。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>css-checkbox-radio-vertical-align</title>
    <link rel="stylesheet" type="text/css" href="css/base.css" media="all"/>
    <style type="text/css">
    body{font:12px SimSun;}
    p{margin:30px 10px;}
    .wrapper{margin:50px auto;width:500px;}
    
    .input1{vertical-align:text-bottom; margin-bottom:-1px; *margin-bottom:-4px;}
    .input2{height:13px; vertical-align:text-top; margin-top:0;}
    .input3{height:15px; vertical-align:bottom; margin-bottom:-1px; margin-bottom:-2px\9; *margin-bottom:0px;}
    .input4{height:14px; vertical-align:top; margin-top:1px; margin-top:0\9;}
    .input5{vertical-align:middle; margin-top:-2px;}
    .input6{vertical-align:-3px;}
    </style>
</head>
<body>
    <div class="wrapper">
        <form action="#" method="post">
            <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>
            <p><input type="radio" name="radio" id="radio4" class="input4"/><label for="radio4">解决方法四</label></p>
            <p><input type="radio" name="radio" id="radio5" class="input5"/><label for="radio5">解决方法五</label></p>
            <p><input type="radio" name="radio" id="radio6" class="input6"/><label for="radio6">解决方法六</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>
            <p><input type="checkbox" name="checkbox" id="checkbox4" class="input4"/><label for="checkbox4">解决方法四</label></p>
            <p><input type="checkbox" name="checkbox" id="checkbox5" class="input5"/><label for="checkbox5">解决方法五</label></p>
            <p><input type="checkbox" name="checkbox" id="checkbox6" class="input6"/><label for="checkbox6">解决方法六</label></p>
        </form>
    </div>
</body>
</html>