blocks|key|1464171|text|在Opera+9.62，Mozilla+3.0.4，Safari+3.2+(用于Windows)中，如果您将一些文本或至少一个空格放在与输入字段相同的行中，则会有所帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1464172|<div+style="line-height:+60px;+height:+60px;+border:+1px+solid+black;">
++++<input+type="text"+value="foo"+/>&nbsp;
</div>|code-block|syntax|javascript|1464173|(假设输入语句后有一个参数)|1464174|IE7忽略了我尝试过的每一个CSS攻击。我建议只对IE使用填充。如果它只需要在一个特定的浏览器中工作，应该会让你更容易正确定位它。|1464175|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

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.

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

(imagine an &amp;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.

blocks|key|1464286|text|我自己也遇到了这个问题。我发现，如果不指定输入高度，而是将font-height和padding结合使用，则会产生垂直对齐的文本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1464287|例如，假设您想要一个42px高的输入框，字体大小为20px。您可以简单地找到输入高度和字体大小之间的差异，将其除以2，并将填充设置为该值。在本例中，您将拥有22px的总填充，即每边11px。|1464288|<input+type="text"+style="padding:+11px+0px+11px+0px;+font-size:+20px;"+/>|code-block|syntax|javascript|1464289|这将给你一个42px高的输入框，并具有完美的垂直对齐方式。|1464290|希望这能有所帮助。|1464291|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I ran into this problem myself. I found that not specifying an input height, but using the font-height and padding combined, results in vertically aligned text.

For instance, lets say you want to have a 42px tall input box, with a font-size of 20px. You could simply find the difference between the input height and the font-size, divide it by two, and set your padding to that amount. In this case, you would have 22px total worth of padding, which is 11px on each side.

<pre><code>&lt;input type="text" style="padding: 11px 0px 11px 0px; font-size: 20px;" /&gt;
</code></pre>

That would give you a 42px tall input box with perfect vertical alignment.

Hope that helps.

blocks|key|1679349|text|我自己还没有尝试过，但尝试设置：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1679350|height+:+36px;+//for+other+browsers
line-height:+36px;+//+for+IE|code-block|syntax|javascript|1679351|其中36px是输入的高度。|1679352|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I've not tried this myself, but try setting:

<pre><code>height : 36px; //for other browsers
line-height: 36px; // for IE
</code></pre>

Where 36px is the height of your input.

blocks|key|1464586|text|我知道我来得太晚了，但希望这篇文章能帮助那些正在寻找能在所有主流浏览器上运行的简明答案的人(除了IE6，我们已经决定停止对该浏览器的支持，所以我拒绝再看它)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1464587|++++#search+#searchbox+{
++++height:+21px;
++++line-height:+21px;
}|code-block|syntax|javascript|1464588|干杯!JP|1464589|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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).

<pre><code> #search #searchbox {
 height: 21px;
 line-height: 21px;
}
</code></pre>

cheers!
JP

blocks|key|1464452|text|在我看来，这个页面上投票最多的答案是最好的答案，但他的数学是错误的，我无法对此发表评论。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1464453|我需要一个恰好40像素高的文本输入框，包括一个1像素的边框。当然，我希望文本在所有浏览器中都垂直居中对齐。|1464454|1像素边框顶部|1464455|1像素边框底部|1464456|8像素顶部填充|1464457|8像素底部填充|1464458|22像素字体大小|1464459|1%2B1%2B8%2B8%2B+22+=+40像素。|1464460|要记住的一件事是，您必须删除css高度属性，否则这些像素将被添加到上面的总和中。|1464461|<input+type="text"+style="padding-top:8px;+padding-bottom:8px;+margin:+0;+border:+solid+1px+#000000;+font-size:22px;"+/>|code-block|syntax|javascript|1464462|这在Firefox、Chrome、IE+8和Safari中都有效。我只能假设，如果像这样简单的东西在IE8中工作，那么它在6、7和9中也应该可以类似地工作，但我还没有对它进行过测试。请让我知道，我会相应地编辑这篇文章。|1464463|entityMap^0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|13|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|14|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|15|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|16|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|17|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|18|8|@]|9|@]|A|$]]|$1|R|3|S|5|T|7|19|8|@]|9|@]|A|$U|V]]|$1|W|3|X|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|Z|$]]

In my opinion, the answer on this page with the most votes is the best answer, but his math was wrong and I couldn't comment on it.

I needed a text input box to be exactly 40 pixels high including a 1 pixel border all the way around. Of course I wanted the text vertically aligned in the center in all browsers.

1 pixel border top 
1 pixel border bottom 
8 pixel top padding 
8 pixel bottom padding 
22 pixel font size

1 + 1 + 8 + 8 + 22 = 40 pixels exactly.

One thing to remember is that you must remove your css height property or those pixels will get added to your total above.

<pre><code>&lt;input type="text" style="padding-top:8px; padding-bottom:8px; margin: 0; border: solid 1px #000000; font-size:22px;" /&gt;
</code></pre>

This is working in Firefox, Chrome, IE 8, and Safari. I can only assume that if something simple like this is working in IE8, it should work similarly in 6, 7, and 9 but I have not tested it. Please let me know and I'll edit this post accordingly.

blocks|key|1679979|text|去找line-height。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1679980|vertical-align标记适用于submit按钮，但不适用于输入字段中的文本。将line-height设置为输入字段的高度在所有浏览器上都有效。包括IE7。|1679981|entityMap^0|2|B|0|0|E|17|B|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|R|8|@]|D|@]|E|$]]]|I|$]]

Go for <code>line-height</code>.

The <code>vertical-align</code> tag works fine for the submit button but not for the text in the input field.
Setting <code>line-height</code> to the height of the input field works on all browsers. Incl IE7.

blocks|key|1464339|text|经过多次搜索和挫败，当我使用固定高度(24px)的背景图像作为文本输入字段时，设置高度、行高和无填充的组合对我来说是有效的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1464340|.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;
}|code-block|syntax|javascript|1464341|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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.

<pre><code>.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;
}
</code></pre>

blocks|key|1680005|text|input[type=text]
{
+++height:+15px;+
+++line-height:+15px;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1680006|这是设置垂直居中位置的正确方法。|unstyled|1680007|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>input[type=text]
{
 height: 15px; 
 line-height: 15px;
}
</code></pre>

this is correct way to set vertical-middle position.

blocks|key|1464390|text|只要不设置输入框的高度，只设置字体大小，就可以了|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1464391|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Just don't set the height of the input box, only set the font-size, that will be ok

blocks|key|1679874|text|我就是这么做的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1679875|<ul>
+++<li>First+group+of+text+here.</li>
+++<li><input+type=""+value=""+/></li>
</ul>|code-block|syntax|javascript|1679876|然后在你的CSS文件中，|1679877|ul+li+{
++display:+block;
++float:+left;
}|1679878|这对你来说应该是可行的。|1679879|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

This is how I do it.

<pre><code>&lt;ul&gt;
 &lt;li&gt;First group of text here.&lt;/li&gt;
 &lt;li&gt;&lt;input type="" value="" /&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

then inside your CSS file, 

<pre><code>ul li {
 display: block;
 float: left;
}
</code></pre>

That should work for you.

blocks|key|1679930|text|尝试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1679931|height:+21px;
line-height:+21px;+/*+FOR+IE+*/|code-block|syntax|javascript|1679932|因为在IE的某些版本(<+9)上，无法正确解释属性高度。|1679933|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Try :

<pre><code>height: 21px;
line-height: 21px; /* FOR IE */
</code></pre>

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

blocks|key|1680098|text|来晚了，但如果你有框大小:边框设置(现在很多人对表单元素都这样做)，那么当前的答案就不起作用了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1680099|只需将IE8的框大小重置为box-sizing:+content-box;，然后使用填充/高度答案之一。|offset|length|style|CODE|1680100|entityMap^0|0|D|O|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

Late to the party, but the current answers won't work if you have box-sizing: border-box set (which a lot of people do for form elements these days).

Just reset the box sizing for IE8 to <code>box-sizing: content-box;</code> then use one of the padding / height answer.

blocks|key|1680140|text|内部垂直对齐取决于字体高度和输入高度，因此，可以使用填充进行调整！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1680141|尝试一些类似的方法：|1680142|.InVertAlign+{
+++height:+40px;
+++line-height:+40px;
+++font-size:+2em;
+++padding:+0px+14px+3px+5px;
}|code-block|syntax|javascript|1680143|..。|1680144|<input+type="text"+class="InVertAlign"+/>|1680145|记得根据你的需要调整css类的值！|1680146|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

The inner vertical alignment will depend on font height and input height, so, it can be adjusted using padding !!! 

Try some like :

<pre><code>.InVertAlign {
 height: 40px;
 line-height: 40px;
 font-size: 2em;
 padding: 0px 14px 3px 5px;
}
</code></pre>

...

<pre><code>&lt;input type="text" class="InVertAlign" /&gt;
</code></pre>

Remember to adjust the values on css class according to your needs !

blocks|key|1464944|text|我只是在MaterialUI的文本输入中处理这个问题。将padding-top:+0.5rem添加到输入样式对我来说很有效。虽然这是调整填充，但至少你不需要担心调整更新，更不用说不同的断点了。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1464945|entityMap^0|S|J|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

I was just working on this within MaterialUI's text inputs. Adding <code>padding-top: 0.5rem</code> to the input style worked for me. While this was adjusting the padding, at least you don't need to worry about adjusting for updates, much less different breakpoints.

blocks|key|1464850|text|您应该删除标题文本，并使用输入占位符作为标签的标题。一些视觉和CSS工作后，您的表单将看起来紧凑和用户友好。我意识到缺点，但这将完全减轻对齐角力。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1464851|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

You should remove your title text and use the input placeholder for your label's title. Some visual and CSS work after that and your form will be looking tight and user friendly. I'm aware of the disadvantages but this will completely relieve the alignment wrestling.

blocks|key|1464513|text|如果您的元素是一个块元素，包含/或具有如下显示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1464514|display:+table-cel|code-block|syntax|javascript|1464515|或者，使用固定的行高，您可以像这样设置垂直对齐：|1464516|Vertical-Align:+Middle;|1464517|它不适用于其他情况，但在这些情况下可以很好地工作。|1464518|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

If your element is a block element contained/or with display like so:

<pre><code>display: table-cel
</code></pre>

Or, with an fixed line-height, you can set the vertical align like so:

<pre><code>Vertical-Align: Middle;
</code></pre>

It won't work for other cases, but it works fine on these conditions.

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?

Vertically align text within input field of fixed-height without display: table or padding?

Windows

line-height属性通常关注垂直对齐，而不是输入。有没有一种方法可以自动将文本居中，而不需要调整填充？

问在固定高度的输入字段中垂直对齐文本而不显示:表格还是填充？
EN

回答 16

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在固定高度的输入字段中垂直对齐文本而不显示:表格还是填充？EN

回答 16

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在固定高度的输入字段中垂直对齐文本而不显示:表格还是填充？
EN