这个问题困扰了好久，昨天到网上查了很多资料，介绍了两种办法
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一样的，在表单中经常会看到 “用户名：”+文本框 ，怎么让“用户名：”和后面的文本框垂直居中呢
欢迎各位高手指导，最好能亲手调试过在回答，能答多少就答多少，言之有理即可得分
一、<input type="text" class="xxx">
.xxx {text-align:center}
实践证明确实能让文字在长的text文本框中居中：
二、楼主你可以转换下思路
文档类型用标准的
<!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
我就不信他不垂直居中
没有实践这块，主要是找第一的这种情况。
三、设置height 和 padding-top
本人亲测 只有ie5.5不支持
ie 6 7 8 ff 3都行
可是楼上的加上 padding-top 后，好好的input被撑的很大，不是预期的效果。。 不太可取。。
四、height:20px;line-height:20px;
input { solid #999;height:22px; background:#ffffff; line-height:22px; margin:0px; padding:0px;/*表单输入框内文字居中*/ vertical-align:middle;/*表单控件上下居中对齐*/}
五、先用切图工具测量出文字距离input上边框的高，然后设置input的height和padding-top,相应的再把input的高减去所设置的padding-top值。这样就不会使得input的高增大，注意input的高设置的高要比测量的input的高小5-6px。
六、将 input 的height 与行高line-height设置相同的值就可以了
摘录自：http://bbs.csdn.net/topics/320085516
[讨论] input文本输入框的文字居中处理：
考虑到有些人会把文本输入框文字居中兼容性问题忽略掉，做了代码如下，搞了一些分析：
我在chrome下测试 并不是居中的。
不会吧，我测试用的是chrome 12.0版本，没有问题。
你能给个截图不？，千万别说上下行空白只差一个像素，那不是问题。
如果差两个的话，那就是问题了。
建议在input标签的时候用line-height加padding来实现高度，不要固定死height，否则比较麻烦
如果你加了line-height，那么在谷歌浏览器下，输入框提示线很丑的。
另外，不定高度， ，没必要这么去考虑吧，这里可以给死，改动改这里没必要。
刚才试了下，不写死height，font-size+padding-top+padding-bottom=height这样还可以，就是ie8下，开始的 ...
在chrome浏览器下，回复都不关闭窗口，也没有任何提示都不知道能不能发了，只好用firefox啦，哎……
摘处：http://bbs.blueidea.com/thread-3033907-1-1.html
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一样的，在表单中经常会看到 “用户名：”+文本框 ，怎么让“用户名：”和后面的文本框垂直居中呢
欢迎各位高手指导，最好能亲手调试过在回答，能答多少就答多少，言之有理即可得分
一、<input type="text" class="xxx">
.xxx {text-align:center}
实践证明确实能让文字在长的text文本框中居中：
二、楼主你可以转换下思路
文档类型用标准的
<!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
我就不信他不垂直居中
没有实践这块，主要是找第一的这种情况。
三、设置height 和 padding-top
本人亲测 只有ie5.5不支持
ie 6 7 8 ff 3都行
可是楼上的加上 padding-top 后，好好的input被撑的很大，不是预期的效果。。 不太可取。。
四、height:20px;line-height:20px;
input { solid #999;height:22px; background:#ffffff; line-height:22px; margin:0px; padding:0px;/*表单输入框内文字居中*/ vertical-align:middle;/*表单控件上下居中对齐*/}
五、先用切图工具测量出文字距离input上边框的高，然后设置input的height和padding-top,相应的再把input的高减去所设置的padding-top值。这样就不会使得input的高增大，注意input的高设置的高要比测量的input的高小5-6px。
六、将 input 的height 与行高line-height设置相同的值就可以了
摘录自：http://bbs.csdn.net/topics/320085516
[讨论] input文本输入框的文字居中处理：
考虑到有些人会把文本输入框文字居中兼容性问题忽略掉，做了代码如下，搞了一些分析：
我在chrome下测试 并不是居中的。
不会吧，我测试用的是chrome 12.0版本，没有问题。
你能给个截图不？，千万别说上下行空白只差一个像素，那不是问题。
如果差两个的话，那就是问题了。
建议在input标签的时候用line-height加padding来实现高度，不要固定死height，否则比较麻烦
如果你加了line-height，那么在谷歌浏览器下，输入框提示线很丑的。
另外，不定高度， ，没必要这么去考虑吧，这里可以给死，改动改这里没必要。
刚才试了下，不写死height，font-size+padding-top+padding-bottom=height这样还可以，就是ie8下，开始的 ...
在chrome浏览器下，回复都不关闭窗口，也没有任何提示都不知道能不能发了，只好用firefox啦，哎……
摘处：http://bbs.blueidea.com/thread-3033907-1-1.html
作者：jackxiang@向东博客 专注WEB应用 构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除
地址：https://jackxiang.com/post/7642/
版权所有。转载时必须以链接形式注明作者和原始出处及本声明！
最后编辑： jackxiang 编辑于2014-11-22 15:20
手把手教你做树莓派语音识别，文本变语音。
如何把火狐设置成中文评论列表
