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

WrBug 发布于2019-08-01 17:54 / 2409人阅读

摘要：故尝试揣摩业界大牛的一些历程，希望能得到不一样的收获。张鑫旭前辈的博客是很不错的选择之一，对这些基本技能阐述得十分透彻。本文是对其很早一篇文章复选框或单选框与文字对齐的问题的深入研究的再次实验，毕竟浏览器对的支持多年来变化很大。

前言

工作三年，写了不少代码，也确实接触不少技术。但是仔细回顾，却又感一片空白，一脸茫然。故尝试揣摩业界大牛的一些历程，希望能得到不一样的收获。

张鑫旭前辈的博客是很不错的选择之一，对 html、css、jquery 这些基本技能阐述得十分透彻。本文是对其很早一篇文章复选框或单选框与文字对齐的问题的深入研究的再次实验，毕竟浏览器对css、html的支持多年来变化很大。

单选框/复选框与文本当前的表现

使用最新浏览器测试，在字体小于浏览器默认字体大小时，chrome、safari、firefox默认已经能够居中对齐了，ie和edge这对难兄难弟依旧出现了差强人意的效果，文字的位置偏下了：

修复

测试了原文中的方法，目前以vertical-align:middle表现最佳，其他方法在调整个别参数后也可达到效果，现整理了三个方法

以vertical-align:middle为基础

代码:

  input{vertical-align: middle;margin-top: -3px;margin-bottom: 0px;}

效果

以vertical-align:text-top为基础

代码:

  input{height:13px;vertical-align:text-top;margin-top: 2px;padding-top: 0;}

效果

新增包裹元素

代码:

  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在不同浏览器下有不同的样式: ie为height: 13px;width: 13px; padding:3px; edge为height:13px;width:13px;margin:3px 3px 3px 4px;; chrome为height:12px;width:12px;margin: 3px 2.895px;;firefox为height:9px;width:9px;border-width:2px;margin:3px 3px 3px 4px;;safari为heigth:12px;weight:12px;margin:3px 2px;。

持续更新地址: http://jaylin.wang/2017/radio...

云服务器 GPU云服务器 html的圆点单选框单选框 html打勾单选框 js单选框只读

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51452.html

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

摘要：故尝试揣摩业界大牛的一些历程，希望能得到不一样的收获。张鑫旭前辈的博客是很不错的选择之一，对这些基本技能阐述得十分透彻。本文是对其很早一篇文章复选框或单选框与文字对齐的问题的深入研究的再次实验，毕竟浏览器对的支持多年来变化很大。前言工作三年，写了不少代码，也确实接触不少技术。但是仔细回顾，却又感一片空白，一脸茫然。故尝试揣摩业界大牛的一些历程，希望能得到不一样的收获。张鑫旭前辈的...

yck 2019-08-29 13:44 评论0 收藏0
文档和元素的几何滚动

摘要：文档和元素的几何滚动当浏览器在窗口中渲染文档时，它将会创建文档一个视觉表现层，在哪里每个元素都有自己的位置和尺寸。通常应用程序将文档看做元素的树。的问题是触发该事件的文档元素的一个引用。文档和元素的几何滚动当浏览器在窗口中渲染文档时，它将会创建文档一个视觉表现层，在哪里每个元素都有自己的位置和尺寸。通常web应用程序将文档看做元素的树。文档坐标和窗口坐标元素位置以像素来进行度量...

wanghui 2019-08-23 10:49 评论0 收藏0
js温故而知新10(操作表单)——学习廖雪峰的js教程

摘要：用操作表单和操作是类似的，因为表单本身也是树。因此，第二种方式是响应本身的事件，在提交时作修改可以在此修改的继续下一步注意要来告诉浏览器继续提交，如果，浏览器将不会继续提交，这种情况通常对应用户输入有误，提示用户错误信息后终止提交。用JavaScript操作表单和操作DOM是类似的，因为表单本身也是DOM树。 HTML表单的输入控件主要有以下几种：文本框，对应的，用于输入文本； ...

simon_chen 2019-08-20 15:08 评论0 收藏0
【译】HTML表单高级样式

摘要：示例多选框和单选框给多选框和单选框添加样式是很让人凌乱的。通向漂亮表单之路一些有用的库和拓展工具尽管在复选框和单选框上的表现力已经够用了，但离其支持高级表单组件仍然遥遥无期。其表单部分挺有用的。系列文章说明原文在本文中，我们将了解如何在HTML表单上使用CSS，为那些难于自定义的表单组件加以样式。如前文所述，文本框和按钮很适合使用CSS，而现在我们得来探索HTML表单样式的那...

caikeal 2019-08-29 10:59 评论0 收藏0
【译】HTML表单高级样式

摘要：示例多选框和单选框给多选框和单选框添加样式是很让人凌乱的。通向漂亮表单之路一些有用的库和拓展工具尽管在复选框和单选框上的表现力已经够用了，但离其支持高级表单组件仍然遥遥无期。其表单部分挺有用的。系列文章说明原文在本文中，我们将了解如何在HTML表单上使用CSS，为那些难于自定义的表单组件加以样式。如前文所述，文本框和按钮很适合使用CSS，而现在我们得来探索HTML表单样式的那...

Jacendfeng 2019-08-01 15:29 评论0 收藏0