input复选框与文字的对齐问题

初学web前端写input标签的复选框时，框框与文字老是不对齐，当时也没放在心上，但是问题终究是逃不过的，总是要解决！

其实解决这个问题非常简单，只要用到vertical-align: middle； 即可让小框框和文字对齐；

没有设置vertical-align属性时是长这样的：

设置了vertical-align属性就对齐了：

！注意：框框和文字都要加上vertical-align:middle;才能显示对其

 

vertical-align 属性设置元素的垂直对齐方式，不只是可以用来设置复选框与文字的对齐，也可以设置<img />与文字的垂直对对齐方式，其属性值有这些，cope来分享：

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

很简单的一个属性，希望对你有用！