[实践OK]<input type="text"> 如何使得输入文字垂直居中,两头居中。

jackxiang 2014-11-22 12:41 | |
这个问题困扰了好久,昨天到网上查了很多资料,介绍了两种办法
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应用 构架之美 --- 构架之美,在于尽态极妍 | 应用之美,在于药到病除
地址:http://jackxiang.com/post/7642/
版权所有。转载时必须以链接形式注明作者和原始出处及本声明!


最后编辑: jackxiang 编辑于2014-11-22 15:20
评论列表
发表评论

昵称

网址

电邮

打开HTML 打开UBB 打开表情 隐藏 记住我 [登入] [注册]