在不显示表格或填充的情况下，在固定高度的输入域内垂直对齐文本？

Line-height 属性通常负责垂直对齐，但不负责输入。有没有办法不用填充就能自动将文本居中？

190197 次浏览
小开

我自己没有试过，但是试着设置:

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

(想象一下在输入语句后面有一个 & nbsp)

IE7忽略了我尝试过的所有 CSS 黑客技术。 我建议只在 IE 中使用填充。如果它只能在一个特定的浏览器中工作，应该可以使您更容易地正确定位它。

小开

我自己也遇到了这个问题。我发现没有指定输入高度，而是结合使用 font-height 和填充，结果是垂直对齐的文本。

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

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

这将给你一个42像素高的输入框与完美的垂直对齐。

希望能帮上忙。

小开

经过大量的搜索和挫折的设置高度，行高度和没有填充的组合时，我使用固定高度(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;
}
小开

只要不设置输入框的高度，只设置字体大小，就可以了

小开

在我看来，这个页面上投票最多的答案是最好的答案，但是他的数学错了，我不能对此作出评论。

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

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、 IE8和 Safari 中都可以使用。我只能假设，如果这样简单的东西在 IE8中工作，它应该在6、7和9中工作，但我还没有测试过。请让我知道，我会相应地编辑这篇文章。

小开

如果您的元素是一个包含/或显示如下的块元素:

display: table-cel

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

Vertical-Align: Middle;

在其他情况下不起作用，但是在这些情况下起作用很好。

小开

我知道我迟到了，但是希望这能帮助任何人寻找一个简洁的答案，这个答案可以在所有的主流浏览器上运行(除了 IE6，我们已经决定停止支持这个浏览器，所以我甚至拒绝再看它)。

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

干杯！ JP

小开

我就是这么做的。

<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)的某些版本中，属性 height 没有得到正确的解释。

小开

呼叫 line-height。

vertical-align标记对于提交按钮可以正常工作，但对于输入字段中的文本则不能。 将 line-height设置为输入字段的高度对所有浏览器都适用。

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

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

小开

您应该删除标题文本并使用标签标题的输入占位符。一些视觉和 CSS 工作后，你的表单将看起来紧凑和用户友好。我知道这样做的缺点，但这样可以完全缓解校准摔跤。

小开

虽然已经迟到了，但是如果你使用的是方框大小的边框集(现在很多人都是这样处理表单元素的) ，那么现在的答案就不起作用了。

只需将 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 类的值！

小开

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


提交答案