解决input标签与图片按钮水平对齐问题

最近有童鞋在 QQ群10904413 里问 input 标签和图片按钮不能水平对齐怎么解决，其实在页面设计的时候，很容易就碰到 input 标签与图片按钮、与<A>标签或 button 按钮与<A>标签等之间水平对齐的问题，记录一下，不再费口舌了！

这里以一个“登录-注册”按钮的例子来说明一下，Html代码及相关CSS样式：

<style type="text/css">
.btn input { padding:0px; border:none; }
.btn2 { vertical-align:middle; background:url(login-btn.gif) #ffffff; color: #FE6591; display: inline-block; font: 700 14px "microsoft yahei"; cursor: pointer; text-align:center; height: 30px; line-height: 30px; width: 80px; padding:0px; }
</style>
<li class="btn"><input type="submit" class="btn2" value="登 录" name="login" id="login">　<a href="register.php" class="btn2" id="reg">注 册</a></li>

从上面的CSS可以看出，解决方法其实很简单，只要加上 vertical-align:middle 属性就可以了。

其它样式可以自己体会！！

也可以用以下CSS来测试， vertical-align:middle 还是不能少，只是换作了无图按钮！

<style type="text/css">
.btn input { padding:0px; height:32px; }
.btn2 { background:#ffffff; border:1px solid #0DC7E2; border-radius: 4px 4px 4px 4px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15); color: #FE6591; display: inline-block; font: 700 14px "microsoft yahei"; cursor: pointer; text-align:center; vertical-align:middle; width:100px; height:30px; line-height:30px; }
</style>

如果想要实现无图片纯CSS渐变按钮，可以参考这篇文章：CSS线性渐变 linear-gradient