Vertically align text within input field of fixed-

2019-01-10 10:28发布

The line-height property usually takes care of vertical alignment, but not with inputs. Is there a way to automatically center text without playing around with padding?

标签: css xhtml
15条回答
Deceive 欺骗
2楼-- · 2019-01-10 11:12

This is how I do it.

<ul>
   <li>First group of text here.</li>
   <li><input type="" value="" /></li>
</ul>

then inside your CSS file,

ul li {
  display: block;
  float: left;
}

That should work for you.

查看更多
乱世女痞
3楼-- · 2019-01-10 11:15

I know I'm late to the party but hopefully this'll help anyone looking for a concise answer that does work across all major browsers (except IE6, we have decided to stop supporting that browser so I refuse to even look at it anymore).

    #search #searchbox {
    height: 21px;
    line-height: 21px;
}

cheers! JP

查看更多
我只想做你的唯一
4楼-- · 2019-01-10 11:18

In Opera 9.62, Mozilla 3.0.4, Safari 3.2 (for Windows) it helps, if you put some text or at least a whitespace within the same line as the input field.

<div style="line-height: 60px; height: 60px; border: 1px solid black;">
    <input type="text" value="foo" />&nbsp;
</div>

(imagine an &nbsp after the input-statement)

IE 7 ignores every CSS hack I tried. I would recommend using padding for IE only. Should make it easier for you to position it correctly if it only has to work within one specific browser.

查看更多
不美不萌又怎样
5楼-- · 2019-01-10 11:18

Try :

height: 21px;
line-height: 21px; /* FOR IE */

Because on some versions of IE (< 9) the property height is not properly interpreted.

查看更多
相关推荐>>
6楼-- · 2019-01-10 11:18

After much searching and frustration a combo of setting height, line height and no padding worked for me when using a fixed height (24px) background image for a text input field.

.form-text {
    color: white;
    outline: none;
    background-image: url(input_text.png);
    border-width: 0px;
    padding: 0px 10px 0px 10px;
    margin: 0px;
    width: 274px;
    height: 24px;
    line-height: 24px;
    vertical-align: middle;
}
查看更多
老娘就宠你
7楼-- · 2019-01-10 11:19
input[type=text]
{
   height: 15px; 
   line-height: 15px;
}

this is correct way to set vertical-middle position.

查看更多
登录 后发表回答