A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

html 对于文本输入框的文字内容怎么实现上下垂直居中(输入文字总是靠上的)和左对齐(和边框留有一点间隙)啊。我折腾了老久,属性试了好多还是搞不定,这里弱弱的请教大虾们!

评分

参与人数 1技术分 +1 收起 理由
郑文 + 1

查看全部评分

7 个回复

正序浏览
杨正 中级黑马 2012-6-30 20:37:50
8#
测试了一下这样做:设置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是不是继承性要好一些呢?
本人愚钝,求解析!
回复 使用道具 举报
本帖最后由 xiaozehope 于 2012-6-30 10:10 编辑

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

评分

参与人数 1技术分 +1 收起 理由
宋天琪 + 1

查看全部评分

回复 使用道具 举报
本帖最后由 黑马杨凯 于 2012-6-29 20:57 编辑


测试了一下这样做:设置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"/>

评分

参与人数 1技术分 +1 收起 理由
宋天琪 + 1

查看全部评分

回复 使用道具 举报
<input type="text" style="text-align:center"  value="黑马程序员"  />

text-align 属性规定元素中的文本的水平对齐方式啊。vertical-align垂直对齐也试了,不行。
回复 使用道具 举报
设置文本的的对齐方式text-align:center,居中,然后设置一下文本框的line-height:22px就可以上下左右居中了

评分

参与人数 1技术分 +1 收起 理由
宋天琪 + 1

查看全部评分

回复 使用道具 举报
试试这样子  <input type="text" style="text-align:center"  value="黑马程序员"  />

评分

参与人数 1技术分 +1 收起 理由
郑文 + 1

查看全部评分

回复 使用道具 举报
input {
solid #999;
height:22px;
background:ffffff;
line-height:22px;
margin:0px;
padding:0px;            /*表单输入框内文字居中*/
vertical-align:middle;/*表单控件上下居中对齐*/
}

评分

参与人数 1技术分 +1 收起 理由
郑文 + 1

查看全部评分

回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马