在固定高度的输入字段内垂直对齐文本，不显示：表格还是填充？

line-height属性通常负责垂直对齐，但不涉及输入。有没有一种方法可以自动使文本居中而不用填充？

在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" />&nbsp;
</div>

（在输入语句后想象一个＆nbsp）

IE 7会忽略我尝试过的所有CSS hack。我建议仅将填充用于IE。如果只需要在一个特定的浏览器中工作，就应该使您更容易正确地定位它。

我自己遇到了这个问题。我发现未指定输入高度，而是结合使用font-height和padding导致垂直对齐的文本。

例如，假设您要有一个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是您输入的高度。

我知道我参加聚会的时间很晚，但是希望这对寻求在所有主要浏览器上都可以使用的简洁答案的人有所帮助（除了IE6，我们已决定不再支持该浏览器，因此我什至不再看它） 。

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

干杯！J.P

我认为，此页面上投票数最高的答案是最好的答案，但他的数学错误，我无法对此发表评论。

我需要一个文本输入框正好为40像素高，其中包括一个1像素的边框。当然，我希望所有浏览器中的文本在中心垂直对齐。

1像素边框顶部
1像素边框底部
8像素顶部填充
8像素底部填充
22像素字体大小

1 +1 + 8 + 8 + 22 = 40个像素。

要记住的一件事是，您必须删除css height属性，否则这些像素将被添加到上方的总计中。

<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这样简单的东西在IE8中可以正常工作，那么它应该在6、7和9中也可以正常工作，但我尚未对其进行测试。请让我知道，我将相应地编辑此帖子。

去吧line-height。

该vertical-align标记对“提交”按钮有效，但不适用于输入字段中的文本。设置line-height为输入字段的高度适用于所有浏览器。包括IE7。

经过大量搜索和挫折之后，将固定高度（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;
}

这是设置垂直居中位置的正确方法。

只是不设置输入框的高度，仅设置字体大小即可。

这就是我的方法。

<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）上，无法正确解释属性的高度。

聚会晚了，但是如果您使用box-sizing：border-box set（目前很多人都在使用表单元素），则当前答案将不起作用。

只需重置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输入样式对我有用。虽然这是在调整填充，但至少您不必担心调整更新，而不必担心不同的断点。

您应该删除标题文本，并使用输入占位符作为标签的标题。之后，一些视觉和CSS工作，您的表单将变得紧凑且用户友好。我知道其缺点，但这将完全缓解对齐问题。

如果您的元素是包含/或具有如下所示的显示的块元素：

display: table-cel

或者，使用固定的线高，您可以设置垂直对齐，如下所示：

Vertical-Align: Middle;

它不适用于其他情况，但在这些情况下可以正常工作。