当前位置: 首页 > Web前端 > HTML

单选按钮、复选框和文本的垂直居中显示问题

时间:2023-04-02 15:46:34 HTML

前言工作三年,写了很多代码,确实接触了很多技术。但当我仔细回头看时,却感到茫然和茫然。因此,揣摩一些行业大牛的历史,希望能得到不一样的收获。张新旭学长的博客是不错的选择之一,他把html、css、jquery的基本技能讲解的很透彻。这篇文章是对前一篇文章中关于复选框或单选框与文本对齐的深入研究的重新实验。毕竟这些年来浏览器对css和html的支持发生了很大的变化。单选框/复选框和文本的当前性能是使用最新的浏览器测试的。当字号小于浏览器默认字号时,chrome、safari、firefox已经可以默认居中了。IE和edge还是差强人意。文字位置靠下:修复测试原文中的方法,目前性能最好的是vertical-align:middle,其他方法调整个别参数后也能达到效果。现在整理了三种基于vertical-align:middlealign:middle的方法是基础代码:input{vertical-align:middle;margin-top:-3px;margin-bottom:0px;}效果是基于vertical-align:text-topcode:input{height:13px;vertical-align:text-top;margin-top:2px;padding-top:0;}effectNewwrappingelementcode:input{vertical-align:middle;}span{display:inline-block;vertical-align:middle;line-height:1.5;}效果点击查看示例效果扩展知识经过测试,IE(ie8+)、edge、chrome、safari的默认字体大小是16px,firefox默认的字体大小是15px。Checkbox和radio在不同的浏览器下有不同的样式:即是height:13px;width:13px;填充:3px;边缘是高度:13px;宽度:13px;边距:3px3px3px4px;;chrome是高度:12px;宽度:12px;边距:3px2.895px;;firefox高度:9px;宽度:9px;边框宽度:2px;边距:3px3px3px4px;;safari是高度:12px;重量:12px;保证金:3px2px;。持续更新地址:http://jaylin.wang/2017/radio...