复选框(checkbox)和单选框(radio)与文字水平垂直居中对齐的解决方法

您所在的位置:网站首页 复选框怎么编辑文字 复选框(checkbox)和单选框(radio)与文字水平垂直居中对齐的解决方法

复选框(checkbox)和单选框(radio)与文字水平垂直居中对齐的解决方法

2024-07-16 01:21| 来源: 网络整理| 查看: 265

今天项目中出现了一个checkbox与同一行的文字不能对齐的问题,检查后发现个问题,checkbox和radio两个标签的默认高宽都是13px,而项目中使用的字体大小却是12px,如果将字体调整为14px就不存在这个问题了,根据网上查到的资料整理了几种解决办法。先发一下具体的问题情况以及解决后的效果

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

 基本上设置vertical-align:middle之后问题就不是很大了,微调下即可

input[type = "checkbox"]{vertical-align:middle;margin-top:-2px;}



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3