单选框和复选框与文本垂直对齐_html/css_WEB-ITnose-html教程-PHP中文网

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

php中文网

发布： 2016-06-24 11:29:30

原创

2004人浏览过

现在的网站一般字体大小都是 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><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>        <p><input type="checkbox" name="checkbox" id="checkbox2" class="input2"/><label for="checkbox2">解决方法二</label></p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1043">
                            <img src="https://img.php.cn/upload/ai_manual/001/503/042/68b6cbfc2f82e961.png" alt="微软文字转语音">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1043">微软文字转语音</a>
                            <p>微软文本转语音，支持选择多种语音风格，可调节语速。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="微软文字转语音">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/ai/1043" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="微软文字转语音">
                        </a>
                    </div>
                        <p><input type="checkbox" name="checkbox" id="checkbox3" class="input3"/><label for="checkbox3">解决方法三</label></p>    </div></body></html>

登录后复制

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

登录后复制