黑马程序员技术交流社区

标题: html 对于文本输入框的文字内容怎么实现上下垂直居中,左..... [打印本页]

---

作者: 杨正    时间: 2012-6-29 12:09
标题: html 对于文本输入框的文字内容怎么实现上下垂直居中,左.....
html 对于文本输入框的文字内容怎么实现上下垂直居中（输入文字总是靠上的）和左对齐（和边框留有一点间隙）啊。我折腾了老久，属性试了好多还是搞不定，这里弱弱的请教大虾们！

---

作者: 许庭洲    时间: 2012-6-29 12:21
input {
solid #999;
height:22px;
background:ffffff;
line-height:22px;
margin:0px;
padding:0px;            /*表单输入框内文字居中*/
vertical-align:middle;/*表单控件上下居中对齐*/
}

---

作者: 赵力    时间: 2012-6-29 12:35
试试这样子  <input type="text" style="text-align:center"  value="黑马程序员"  />

---

作者: 朱亮辉    时间: 2012-6-29 13:49
设置文本的的对齐方式text-align:center，居中，然后设置一下文本框的line-height：22px就可以上下左右居中了

---

作者: 杨正    时间: 2012-6-29 15:55

<input type="text" style="text-align:center"  value="黑马程序员"  />

text-align 属性规定元素中的文本的水平对齐方式啊。vertical-align垂直对齐也试了，不行。

---

作者: 黑马杨凯    时间: 2012-6-29 19:34



测试了一下这样做：设置line-height的值和text的height值一样，就可以达到垂直居中的效果了，而左边留一点空，可以设置padding值，测试代码如下：
  <input type="text" style="width:100px;height:100px;line-height:100px;font-size:larger;text-align:left;padding:0 0 0 8px"/>

---

作者: xiaozehope    时间: 2012-6-30 09:39


这个问题也困惑了我好久，在可以用margin和padding实现，但是感觉不好。我是这样使用的，就是在input标签前面加个空文本的span标签，定义一下span标签的样式为display:inline-block;(行内块元素)就可以实现了。{:soso_e130:}

---

作者: 杨正    时间: 2012-6-30 20:37

测试了一下这样做：设置line-height的值和text的height值一样，就可以达到垂直居中的效果了，而左边留一点空，可以设置padding值，测试代码如下：
  <input type="text" style="width:100px;height:100px;line-height:100px;font-size:larger;text-align:left;padding:0 0 0 8px"/>

很谢谢，我测试了一下，<input type="text" style="width:150px;height:28px;line-height:26px;text-align:left;padding:0 0 0 8px"/>达到了我想要的效果。但是问题是line-height：28px时却不是垂直居中的，用鼠标选取时可以上下移动，26px时是效果最好的啊，这是什么原因呢？这里也可以设置line-height：200%或者2也可以，设置line-height：2是不是继承性要好一些呢？
本人愚钝，求解析！

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2