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

Posted baimeishaoxia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了单选框和复选框与文本的垂直居中显示问题相关的知识,希望对你有一定的参考价值。

前言

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

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

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

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

技术图片
技术图片
技术图片
技术图片
技术图片

修复

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

  1. vertical-align:middle为基础

    • 代码:
      input{vertical-align: middle;margin-top: -3px;margin-bottom: 0px;}
    • 效果

    技术图片
    技术图片

  2. vertical-align:text-top为基础

    • 代码:
      input{height:13px;vertical-align:text-top;margin-top: 2px;padding-top: 0;}
    • 效果

    技术图片
    技术图片

  3. 新增包裹元素

    • 代码:
      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...

以上是关于单选框和复选框与文本的垂直居中显示问题的主要内容,如果未能解决你的问题,请参考以下文章

章节十5-单选框和复选框

复选框单选框与文字对齐问题

[CSS]复选框单选框与文字对齐问题的研究与解决.

怎么让CGridCtrl复选框居中

自定义单选框和复选框案例

Selenium2+python自动化19-单选框和复选框