• Register

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

版权声明:转载请注明来自杨俊伟博客,本文地址:http://yangjunwei.com/a/765.html
除非注明,杨俊伟博客文章均为原创,转载请注明出处和链接!
 

3 条评论 »

发表评论 

我还是想用邮箱注册

登录

忘记密码 ?

用第三方帐号快捷登录

已有账户?前往登录吧~

注册