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

Posted 2020-10-16

对于14像素大小的字体是没有本篇所要探讨的单（复）选框与文字对齐的问题的。

对于12像素大小的文字，则就存在对齐问题了，尤其在Firefox火狐浏览器以及chrome谷歌浏览器下。

html：

　　　　<label style="font-size:12px;">
　　　　　　<input type="checkbox"/> 文字文字
　　　　</label>

解决方案：

　　　　　　vertical-align为基础：

　　　　　　给 input:     vertical-align:text-bottom; margin-bottom:2px; margin-bottom:-2px\9;

　　　　　　给 input ： height:13px; vertical-align:text-top; margin-top:0;

　　　　　　给 input ：height:15px; vertical-align:bottom; margin-bottom:3px; margin-top:-1px;

　　　　　　给 input ：  height:14px; vertical-align:top;

　　　　　　给 input： vertical-align:middle; margin-top:-2px; margin-bottom:1px;