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

来源：动视网责编：小采时间：2020-11-27 16:18:13

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

单选框和复选框与文本垂直对齐_html/css_WEB-ITnose:现在的网站一般字体大小都是 12px，在 12px 下单选框和复选框与文本垂直居中对不齐，解决方法有很多，今天我整理了下最常用的 3 种方法。 html 结构： radio-and-checkbox-and-text-vertical-align 单选框解决方法一解决方法二

推荐度：

点击下载本文 文档为doc格式

导读单选框和复选框与文本垂直对齐_html/css_WEB-ITnose:现在的网站一般字体大小都是 12px，在 12px 下单选框和复选框与文本垂直居中对不齐，解决方法有很多，今天我整理了下最常用的 3 种方法。 html 结构： radio-and-checkbox-and-text-vertical-align 单选框解决方法一解决方法二

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

html 结构：

radio-and-checkbox-and-text-vertical-align

单选框

解决方法一

解决方法二

解决方法三

复选框

解决方法一

解决方法二

解决方法三

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