單選框和複選框與文本的垂直居中顯示問題

前言

工做三年，寫了很多代碼，也確實接觸很多技術。可是仔細回顧，卻又感一片空白，一臉茫然。故嘗試揣摩業界大牛的一些歷程，但願能獲得不同的收穫。

張鑫旭前輩的博客是很不錯的選擇之一，對 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...