在固定高度的输入字段中垂直对齐文本而不显示：表格或填充？答案

【问题标题】：Vertically align text within input field of fixed-height without display: table or padding?在固定高度的输入字段中垂直对齐文本而不显示：表格或填充？
【发布时间】：2020-06-23 06:24:44
【问题描述】：

line-height 属性通常负责垂直对齐，但不涉及输入。有没有办法在不使用填充的情况下自动居中文本？

【问题讨论】：

不玩填充？不是我的经验。如果您希望它在浏览器中呈现（几乎）相同，我发现使用填充是必要的。

标签： css xhtml

【解决方案1】：

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

例如，假设您想要一个 42 像素高的输入框，字体大小为 20 像素。您可以简单地找到输入高度和字体大小之间的差异，将其除以 2，然后将填充设置为该数量。在这种情况下，您将有 22px 的总内边距，即每边 11px。

<input type="text" style="padding: 11px 0px 11px 0px; font-size: 20px;" />

这将为您提供一个 42 像素高且具有完美垂直对齐的输入框。

希望对您有所帮助。

【讨论】：

即使这样可行，最初的问题是如何在没有填充的情况下解决这个问题。
正如 Micros 所指出的，这确实有效，但最初的问题是如何在没有填充的情况下做到这一点，这似乎是可能的。我相信 Chris Hawes 的回答是最简单的解决方案，并且不需要使用填充。
有时你需要一个明确的高度，在这种情况下使用填充是不可接受的。虽然这确实有效，但它并没有解决这种情况（这就是问题所在）。请参阅下面的 Chris Hawes 答案以获取没有填充的正确答案（即“行高”）。

【解决方案2】：

我自己没有尝试过，但尝试设置：

height : 36px; //for other browsers
line-height: 36px; // for IE

36px 是输入的高度。

【讨论】：

实际上 line-height 属性解决了 IE 中的问题。我认为这是最简单的方法。
我看到的唯一问题是如果你有换行文本。
我发现 line-height 也需要，尤其是在 iPhone 13 Safari 上

【解决方案3】：

在 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 使用填充。如果它只需要在一个特定的浏览器中工作，应该会让您更容易正确定位它。

【讨论】：

-1 这会对齐输入字段，而不是输入字段中的文本。
文本对齐：居中；将此应用于文本字段的 CSS，它对我有用

【解决方案4】：

我知道我迟到了，但希望这能帮助任何人寻找一个适用于所有主要浏览器的简明答案（除了 IE6，我们决定停止支持该浏览器，所以我什至拒绝看它不再）。

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

干杯！ JP

【讨论】：

【解决方案5】：

在我看来，这个页面上得票最多的答案是最好的答案，但他的数学是错误的，我无法评论它。

我需要一个正好 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 中类似地工作，但我还没有测试过。请告诉我，我会相应地编辑这篇文章。

【讨论】：

I can only assume that if something simple like this is working in IE8, it should work similarly in 6, 7 - 有很多非常简单的东西（至少按照今天的标准）在 IE8 中有效（即使是半途而废），但在 IE6 甚至 7 中是不可能的。提醒一下，IE6 不支持 position: fixed 甚至透明 PNG。

【解决方案6】：

去line-height。

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

【讨论】：

虽然这个答案提供了一个很好的理由，但它并没有提供答案。我现在正在尝试，它甚至不起作用。首先，高度覆盖并使行高无用。其次， line-height 只是让输入框变大/变小，不做任何调整文本位置的事情。

【解决方案7】：

在对文本输入字段使用固定高度 (24px) 背景图像时，经过多次搜索和挫折，设置高度、行高和无填充的组合对我有用。

.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;
}

【讨论】：

vertical-align 将输入元素相对于其父元素而不是其内部对齐。

【解决方案8】：

input[type=text]
{
   height: 15px; 
   line-height: 15px;
}

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

【讨论】：

当你发布这个时，这个确切的解决方案已经在多个答案中给出了。

【解决方案9】：

只要不设置输入框的高度，只设置font-size就可以了

【讨论】：

【解决方案10】：

我就是这样做的。

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

然后在你的 CSS 文件中，

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

这应该适合你。

【讨论】：

与“float”一起使用时不需要“display: block”。记住 float = block。

【解决方案11】：

试试：

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

因为在某些版本的 IE (

【讨论】：

当你发布这个时，这个确切的解决方案已经在多个答案中给出了。

【解决方案12】：

聚会迟到了，但是如果您设置了 box-sizing:border-box 集（现在很多人为表单元素这样做），那么当前的答案将不起作用。

只需将 IE8 的框大小重置为 box-sizing: content-box;，然后使用填充/高度答案之一。

【讨论】：

【解决方案13】：

内部垂直对齐将取决于字体高度和输入高度，因此可以使用填充进行调整！！！

试试看：

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

...

<input type="text" class="InVertAlign" />

记得根据你的需要调整css类的值！

【讨论】：

【解决方案14】：

我只是在 MaterialUI 的文本输入中处理这个问题。在输入样式中添加padding-top: 0.5rem 对我有用。虽然这是在调整填充，但至少您不必担心调整更新，更不用说不同的断点了。

【讨论】：

【解决方案15】：

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

【讨论】：

【解决方案16】：

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

display: table-cel

或者，使用固定的行高，您可以像这样设置垂直对齐：

Vertical-Align: Middle;

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

【讨论】：

这只适用于带有display: table-cell的块元素，或者带有固定line-height的块。