61,112
社区成员
发帖
与我相关
我的任务
分享如何使得输入文字垂直居中
这个问题困扰了好久，昨天到网上查了很多资料，介绍了两种办法
1：设置input的height和line-height，line-height比height稍小一些，但这种方式只在IE中生效，FireFox中文字仍然是
顶部显示的
2：设置input的padding-top，padding-top=(height-line-height)/2,这种方法勉强可以是的文字想居中 位置靠近，但padding-top的值的慢慢的调节，调节了很久发现文字终于居中了，结果文本框的高度也变大了，一个很大的文本框看其来总有点不协调，请问大家是怎么调节<input type="text">使得文字居中的（ vertical-align:middle 也试过，但是没有效果）
3:请问Dreamweaver中有没有专门用于显示文字的标签呢，就像asp.net中的label一样的，在表单中经常会看到 “用户名：”+文本框 ，怎么让“用户名：”和后面的文本框垂直居中呢
欢迎各位高手指导，最好能亲手调试过在回答，能答多少就答多少，言之有理即可得分
1：设置input的height和line-height，line-height比height稍小一些，但这种方式只在IE中生效，FireFox中文字仍然是
顶部显示的
2：设置input的padding-top，padding-top=(height-line-height)/2,这种方法勉强可以是的文字想居中 位置靠近，但padding-top的值的慢慢的调节，调节了很久发现文字终于居中了，结果文本框的高度也变大了，一个很大的文本框看其来总有点不协调，请问大家是怎么调节<input type="text">使得文字居中的（ vertical-align:middle 也试过，但是没有效果）
3:请问Dreamweaver中有没有专门用于显示文字的标签呢，就像asp.net中的label一样的，在表单中经常会看到 “用户名：”+文本框 ，怎么让“用户名：”和后面的文本框垂直居中呢
欢迎各位高手指导，最好能亲手调试过在回答，能答多少就答多少，言之有理即可得分
...全文
请发表友善的回复…
发表回复
Pbingbing 2011-04-14
- 打赏
- 举报
将 input 的height 与行高line-height设置相同的值就可以了
songguaiguai 2011-02-23
- 打赏
- 举报
先用切图工具测量出文字距离input上边框的高，然后设置input的height和padding-top,相应的再把input的高减去所设置的padding-top值。这样就不会使得input的高增大，注意input的高设置的高要比测量的input的高小5-6px。
hongh520 2010-08-19
- 打赏
- 举报
input { solid #999;height:22px; background:#ffffff; line-height:22px; margin:0px; padding:0px;/*表单输入框内文字居中*/ vertical-align:middle;/*表单控件上下居中对齐*/}
gs8716 2010-06-03
- 打赏
- 举报
height:20px;line-height:20px;
leiyu_ai 2009-12-19
- 打赏
- 举报
可是楼上的加上 padding-top 后，好好的input被撑的很大，不是预期的效果。。 不太可取。。
赵弟栋 2009-10-19
- 打赏
- 举报
本人亲测 只有ie5.5不支持
ie 6 7 8 ff 3都行
ie 6 7 8 ff 3都行
starwu 2009-10-19
- 打赏
- 举报
设置height 和 padding-top
赵弟栋 2009-10-19
- 打赏
- 举报
楼主你可以转换下思路
文档类型用标准的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
input的高 font-size line-height 你都给他成一样的像素
再给input加 相同像素的padding top bottom
我就不信他不垂直居中
文档类型用标准的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
input的高 font-size line-height 你都给他成一样的像素
再给input加 相同像素的padding top bottom
我就不信他不垂直居中
f231358 2009-10-19
- 打赏
- 举报
<input type="text" class="xxx">
.xxx {text-align:center}
mahongzuoye 2009-10-18
- 打赏
- 举报
可以将其放入布局表格中，然后设置表的垂直居中属性应该就可以了吧
syjml 2009-10-18
- 打赏
- 举报
暂无办法
a404125339 2009-10-18
- 打赏
- 举报
没试过，学习了
sohighthesky 2009-10-17
- 打赏
- 举报
asp.net的label也 是个span而已
chch_0519 2009-10-17
- 打赏
- 举报
请问把 input 的 padding margin 归0了嘛？归零以后设置 height,line-height试试看。
sunseat 2009-10-17
- 打赏
- 举报
确实没有办法，最近也在困扰。
浴火_凤凰 2009-10-12
- 打赏
- 举报
暂时没有办法通用
