解决input标签与图片按钮水平对齐问题
2013-05-14 00:00
267 查看
input 标签和图片按钮不能水平对齐怎么解决,其实在页面设计的时候,很容易就碰到 input 标签与图片按钮、与<A>标签或 button 按钮与<A>标签等之间水平对齐的问题,记录一下,不再费口舌了!
这里以一个“登录-注册”按钮的例子来说明一下,Html代码及相关CSS样式:
从上面的CSS可以看出,解决方法其实很简单,只要加上 vertical-align:middle 属性就可以了。
其它样式可以自己体会!!
也可以用以下CSS来测试, vertical-align:middle 还是不能少,只是换作了无图按钮!
这里以一个“登录-注册”按钮的例子来说明一下,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>
相关文章推荐
- Input标签与图片按钮水平对齐解决方法
- Android之解决toolbar里面显示返回按钮图片太大和没有水平居中的问题
- 图片按钮提交问题解决方法 input image
- input文本框、文字、按钮、图片 垂直居中对齐的解决办法
- Input标签和图片按钮水平对其
- input文本框、文字、按钮、图片 垂直居中对齐的解决办法
- CSS解决文字与图片不能水平居中对齐的问题
- input文本框、文字、按钮、图片 垂直居中对齐的解决办法
- [CSS]Input标签与图片按钮对齐
- [CSS]Input标签与图片按钮对齐
- 解决烦人的img与input不能水平对齐的问题
- DISCUZ!7.2 [ATTACH] 标签中图片无法显示及其他一些问题的解决
- 使用input标签 type='file' 上传图片的问题
- 完美解决ie6不支持png 透明图片 和标签背景的问题
- asp.net GirdView按钮变为图片时画面和事件执多次问题(已解决)
- HTML自定义按钮上传图片并实现预览(同时解决getAsDataURL()弃用问题)
- IE6 PNG不透明问题 (只解决img标签的图片)
- 解决在火狐浏览器中文本框和按钮在同行显示不对齐问题
- 解决TextView富文本显示时emoj或图片和文字不对齐的问题
- eWebeditor在IE8、IE9中插入图片按钮不能使用问题的解决方法