解决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