Question

单选按钮与文字如何对齐？

<input type="radio" value="立即发送" name="a_1">
立即发送

<input type="radio" value="保存到草稿箱" name="a_1">
保存到草稿箱

如何才能让那个小按钮与文字对其呢？哪位高手请回答一下！

Answer 1

布局如下：
<input type="radio" value="立即发送" name="a_1">立即发送
<input type="radio" value="保存到草稿箱" name="a_1">保存到草稿箱
如何才能让那个小按钮与文字对其呢？
解决方法:
1.以vertical-align:text-bottom为基础的
css代码如下：vertical-align:text-bottom; margin-bottom:2px; margin-bottom:-2px\9;
2.以vertical-align:text-top为基础的
css代码如下：height:13px; vertical-align:text-top; margin-top:0;
3.以vertical-align:bottom为基础的
css代码如下：height:15px; vertical-align:bottom; margin-bottom:3px; margin-top:-1px;
4.以vertical-align:middle为基础的
css代码如下：vertical-align:middle; margin-top:-2px; margin-bottom:1px;

Answer 2

目前中文网站上面的文字，绝大多数网站的主流文字大小为12px，因为在目前高分辨率显示器屏幕下，11px的汉字，其像素点开始不规整，文字不如12px来的显示良好。12px大小的文字就是主流也是底线。然而12px的文字与单选框和复选框是不对齐的。

考虑到兼容性，控件本身的特殊性以及代码成本的控制等，使得这个问题不是简单就能解决的。

解决方法:

1. 以vertical-align:text-bottom为基础的

   css代码如下：vertical-align:text-bottom; margin-bottom:2px; margin-bottom:-2px\9;

2. 以vertical-align:text-top为基础的

   css代码如下：height:13px; vertical-align:text-top; margin-top:0;

3. 以vertical-align:bottom为基础的

   css代码如下：height:15px; vertical-align:bottom; margin-bottom:3px; margin-top:-1px;

4. 以vertical-align:middle为基础的

   css代码如下：vertical-align:middle; margin-top:-2px; margin-bottom:1px;