<input type="text"> 怎么使得输入文字垂直居中
日期：2014-05-17 浏览次数：20732 次
<input type="text"> 如何使得输入文字垂直居中
这个问题困扰了好久，昨天到网上查了很多资料，介绍了两种办法
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 的 padding margin 归0了嘛？归零以后设置 height,line-height试试看。
------解决方案--------------------
<input type="text" class="xxx">
这个问题困扰了好久，昨天到网上查了很多资料，介绍了两种办法
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 的 padding margin 归0了嘛？归零以后设置 height,line-height试试看。
------解决方案--------------------
<input type="text" class="xxx">
- CSS code
.xxx {text-align:center}
------解决方案--------------------
楼主你可以转换下思路
文档类型用标准的
<!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都行
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
