解决checkbox与对应文字不对齐的问题

最近公司比较忙，所以一直在赶项目，很久没有更新博客了。

刚才在工作中又遇到了一个问题，下面我来分享一下吧(｡･∀･)ﾉﾞ

问题所在

我写了一个input，他的类型是checkbox，在他的后面接着label标签进行描述。

 

html如下：

<input type="checkbox" checked="checked" name="sign" id="sign"/>
<label for="sign">我已阅读并确认**产品服务协议</label>

 

可是显示出来的效果可不如我所想Σ(っ °Д °;)っ，checkbox和label的文字并没有对齐（我想大家也经常遇到这种问题吧），我得想办法搞定它！

如何解决

我想了一想，试了又试，最后得出了解决方案~

来！我们看代码！(●'◡'●)

调整input元素的css

css:

　　#sign{

　　　　display: inline-block;
　　　　vertical-align: middle;
　　　　margin-bottom: 2px;

　　}

运用改变input的元素类型，设置垂直居中，然后再垫2px的margin!完美！(●'◡'●)

label怎么用？什么意思？

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

以上都是W3C上的原话，做一个安静的搬运工(ˉ▽ˉ；)...

简单来说就是点击label，会聚焦到label for的id元素，以我上面的代码为例子，点击“我已阅读并确认**产品服务协议”的文字，那么对应id的checkbox的小勾勾会勾上，相当于点击了checkbox的效果，这样就提高了我们的用户体验，不用去点那个细小的小框框了。

希望这篇能在你需要它的时候提供一点小小的帮助。