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

Sat, 22 Nov 2014 04:41:43 +0000

这个问题困扰了好久，昨天到网上查了很多资料，介绍了两种办法
1：设置input的height和line-height，line-height比height稍小一些，但这种方式只在IE中生效，FireFox中文字仍然是
    顶部显示的

2：设置input的padding-top，padding-top=(height-line-height)/2,这种方法勉强可以是的文字想居中位置靠近，但padding-top的值的慢慢的调节，调节了很久发现文字终于居中了，结果文本框的高度也变大了，一个很大的文本框看其来总有点不协调，请问大家是怎么调节使得文字居中的（  vertical-align:middle 也试过，但是没有效果）

3:请问Dreamweaver中有没有专门用于显示文字的标签呢，就像asp.net中的label一样的，在表单中经常会看到  “用户名：”+文本框  ，怎么让“用户名：”和后面的文本框垂直居中呢

欢迎各位高手指导，最好能亲手调试过在回答，能答多少就答多少，言之有理即可得分

一、
.xxx {text-align:center}

实践证明确实能让文字在长的text文本框中居中：

二、楼主你可以转换下思路
文档类型用标准的

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文本输入框的文字居中处理：

考虑到有些人会把文本输入框文字居中兼容性问题忽略掉，做了代码如下，搞了一些分析：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input测试</title>
<style type="text/css">
/*reset.css*/
body{width:960px;margin:10px auto;padding:0;font:12px/1.5 Arial, Helvetica, sans-serif;}
input { padding:0; }
/***---测试高度解析，文本居中差异以及提示输入线差异---***/
.gb_sear input { font:16px "宋体", arial; /*font:16px arial;*/ height:28px; line-height:28px\9; _line-height:29px; width:14em; padding-left:4px; border:1px solid #ace; overflow:hidden; outline:none; }
.gb_sear label { display:inline-block; position:relative; top:2px; *top:-4px;
}
/***---无关测试样式---***/
h1{padding:10px 0;font-size:14x;color:#f60;margin:0 0 20px 0;line-height:1.5;border-bottom:1px dashed #999;}
.test,.test_result{border:1px solid #666;padding:10px;margin-top:10px;}
.test_result li{line-height:1.7;color:#800000;}
</style>
</head>
<body>
<div class="test">
  <h1>input文本居中测试</h1>
  <div class="gb_sear">
    <label for="search">请输入搜索关键字:</label>
    <input type="text" id="search"/>
  </div>
</div>
<div class="test_result">
  <h1>测试结论</h1>
  <ul>
    <li>"宋体"在行高的表现上，浏览器解析效果相当一致，除了那傻逼的IE6，用在表单文本输入框上亦是如此。使用arial则会出现兼容问题。</li>
    <li>非IE的标准浏览器，在对input文本输入框中的文字进行居中时，不必设置line-height。而chrome浏览器在遇到line-height声明时还会产生难看的输入提示线（位置和高度都不好看）。</li>
    <li>无论字体设置多大，使用什么字体族，IE6文本居中都会“出错”。一个好的解决方法是，对于IE6，把通用的line-height值增加一个像素，居中效果就相当完美了。</li>
  </ul>
</div>
</body>
</html>

我在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

[评论] [实践OK]input type=text 如何使得输入文字垂直居中，两头居中。

Thu, 01 Jan 1970 00:00:00 +0000

向东博客 专注WEB应用 构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除

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

[评论] [实践OK]input type=text 如何使得输入文字垂直居中，两头居中。

向东博客专注WEB应用构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除