2017-11-07【复选框、单选框与文字不对齐】

今日总结了一下表单元素的对齐和某些处理的情况：

1.png 2.png 3.png 4.png 5.png

文字加不加label都一样。

为什么单选框、复选框与文字不对齐呢？
文字大小不一，而单选框、复选框大小是一定的。它们没有按照彼此的中心线对齐，所以看起来就是不对齐的。在某一些文字大小下，看起来就是有点对齐的，但是也不完全对齐，例如：14px、15px。

它们默认的对齐方式是什么？
vertical-align: baseline;

如何修改？使之对齐？
方法1：给单选框、复选框添加class，给该class定义样式如下：

.radio, .checkbox {
    vertical-align:text-bottom;
    margin-bottom:2px;
    margin-bottom:-2px\9;
}

页面中给元素添加class：【type=radio一定要加name属性，否则不能实现单选的效果】

<input type="radio" name="sex" class="radio"><label>男</label>
<input type="radio" name="sex" class="radio"><label>女</label>
<input type="checkbox" class="checkbox"><label>姐姐</label>
<input type="checkbox" class="checkbox"><label>妹妹</label>

在页面中就对齐了。可以对比一下：【以字体是12px为例：】

6.png

方法2：法1是以vertical-align: text-bottom对齐，以下则是以vertical-align: text-top对齐。

.radio, .checkbox {
    vertical-align: text-top;
    height: 12px;
    margin-top: 2px;
}

7.png

方法3：以vertical-align: bottom对齐

.radio, .checkbox {
    vertical-align: bottom;
    height: 12px;
    margin-bottom: 3px;
    margin-top: -1px;
}

8.png

方法4：以vertical-align: top对齐

.radio, .checkbox {
    vertical-align: top;
    height: 14px;
}

9.png

方法5：以vertical-align: middle对齐

.radio, .checkbox {
    vertical-align: middle;
    margin-top: -3px;
    margin-bottom: 1px;
}

10.png

方法6：设置vertical-align: -2px;

.radio, .checkbox{
    vertical-align: -2px;
}

11.png

以上仅是在Windows下的Chrome浏览器，并且字体是12px进行的测试。

针对vertical-align、margin、height进行样式组合，或者padding，可以得到想要的结果

type=radio的默认的margin值 type=checkbox的默认的margin值

---

不考虑文字，input输入框、下拉框、按钮之间的不对齐现象探究。

1.png

可以看出，如果文字是中文，会有明显的不对齐现象；但是如果是英文，不对齐现象则不是很明显。

将中英文放在一行进行对比，可以看出中间汉字显示的下拉框有明显上升：

2.png

经测试，以上表单元素也都是按照vertical-align: baseline的方式进行对齐。

方法：将所有表单元素设置样式vertical-align: middle;就可以了，简单快捷。

3.png