line-height 属性通常负责垂直对齐，但不负责输入。有没有一种方法可以在不使用填充的情况下自动将文本居中？
我自己遇到了这个问题。我发现不指定输入高度，而是结合使用字体高度和填充，会导致文本垂直对齐。
例如，假设您想要一个 42px 高的输入框，字体大小为 20px。您可以简单地找到输入高度和字体大小之间的差异，将其除以二，然后将填充设置为该值。在这种情况下，您将有 22px 的总填充值，即每边 11px。
<input type="text" style="padding: 11px 0px 11px 0px; font-size: 20px;" />
这将为您提供一个 42px 高的输入框，并具有完美的垂直对齐方式。
我自己没有尝试过，但尝试设置：
height : 36px; //for other browsers
line-height: 36px; // for IE
36px 是输入的高度。
在 Opera 9.62、Mozilla 3.0.4、Safari 3.2（适用于 Windows）中，如果您在输入字段的同一行中放置一些文本或至少一个空格，它会有所帮助。
<div style="line-height: 60px; height: 60px; border: 1px solid black;">
<input type="text" value="foo" />
</div>
（想象输入语句后的 ）
IE 7 忽略了我尝试过的每一个 CSS hack。 我建议只对 IE 使用填充。如果它只需要在一个特定的浏览器中工作，应该会让你更容易正确定位它。
我知道我来晚了，但希望这会帮助任何人寻找一个适用于所有主要浏览器的简明答案（除了 IE6，我们已经决定停止支持该浏览器，所以我什至拒绝再看它了).
#search #searchbox {
height: 21px;
line-height: 21px;
}
干杯！ 日语
在我看来，本页得票最多的答案是最佳答案，但他的数学有误，我无法评论。
我需要一个恰好 40 像素高的文本输入框，包括一个 1 像素的边框。当然，我希望文本在所有浏览器中垂直居中对齐。
1 像素边框顶部
1 像素边框底部
8 像素顶部填充
8 像素底部填充
22 像素字体大小
1 + 1 + 8 + 8 + 22 = 40 个像素。
要记住的一件事是你必须删除你的 css 高度属性，否则这些像素将被添加到你上面的总数中。
<input type="text" style="padding-top:8px; padding-bottom:8px; margin: 0; border: solid 1px #000000; font-size:22px;" />
这适用于 Firefox、Chrome、IE 8 和 Safari。我只能假设如果像这样简单的东西在 IE8 中工作，它应该在 6、7 和 9 中工作类似但我没有测试它。请让我知道，我会相应地编辑这篇文章。
去
line-heightvertical-alignline-height经过多次搜索和挫折后，在文本输入字段中使用固定高度（24 像素）背景图像时，设置高度、行高和无填充的组合对我有用。
.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;
}
input[type=text]
{
height: 15px;
line-height: 15px;
}
这是设置垂直中间位置的正确方法。
只要不设置输入框的高度，只设置font-size就可以了
我就是这样做的。
<ul>
<li>First group of text here.</li>
<li><input type="" value="" /></li>
</ul>
然后在你的 CSS 文件中，
ul li {
display: block;
float: left;
}
这应该适合你。
尝试：
height: 21px;
line-height: 21px; /* FOR IE */
因为在某些版本的 IE 上 (< 9) the property height is not properly interpreted.
聚会迟到了，但是如果您设置了 box-sizing: border-box 集（现在很多人都为表单元素这样做），那么当前的答案将不起作用。
只需将 IE8 的框大小重置为
box-sizing: content-box;内部垂直对齐将取决于字体高度和输入高度，因此，可以使用填充来调整！！！
尝试一些像：
.InVertAlign {
height: 40px;
line-height: 40px;
font-size: 2em;
padding: 0px 14px 3px 5px;
}
...
<input type="text" class="InVertAlign" />
记得根据您的需要调整 css 类的值！
我只是在 MaterialUI 的文本输入中处理这个问题。将
padding-top: 0.5rem这并不理想，但更改底部填充是最简单的解决方案。其他任何开销都太大了。
padding-bottom: 20%;
您应该删除标题文本并使用输入占位符作为标签标题。一些视觉效果和 CSS 之后可以工作，您的表单将看起来紧凑且用户友好。我知道缺点，但这将完全缓解对齐摔跤。
如果您的元素是包含/或显示如下的块元素：
display: table-cel
或者，使用固定的行高，您可以像这样设置垂直对齐：
Vertical-Align: Middle;
它不适用于其他情况，但在这些条件下效果很好。