78

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

4

16 回答 16

101

我自己遇到了这个问题。我发现不指定输入高度，而是使用组合的字体高度和填充，会导致垂直对齐的文本。

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

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

这会给你一个 42px 高的输入框，具有完美的垂直对齐。

希望有帮助。

于 2009-06-03T16:50:29.880 回答
63

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

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

其中 36px 是输入的高度。

于 2008-11-29T13:05:19.657 回答
13

在 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>

（想象在输入语句之后有一个  ）

IE 7 忽略了我尝试过的每一个 CSS hack。我建议仅对 IE 使用填充。如果它只需要在一个特定的浏览器中工作，应该会让你更容易正确定位它。

于 2008-11-29T15:30:24.827 回答
6

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

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

干杯！J.P

于 2011-08-18T22:21:35.970 回答
3

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

我需要一个文本输入框正好是 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 中同样工作，但我还没有测试过。请让我知道，我会相应地编辑这篇文章。

于 2011-03-18T04:04:38.133 回答
2

去line-height。

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

于 2013-05-29T10:21:40.310 回答
1

在对文本输入字段使用固定高度（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;
}
于 2010-02-17T22:43:30.810 回答
1 
input[type=text]
{
   height: 15px; 
   line-height: 15px;
}

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

于 2013-07-01T08:42:36.760 回答
0

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

于 2010-08-18T05:36:31.997 回答
0

我就是这样做的。

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

然后在你的 CSS 文件中， 

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

那应该对你有用。

于 2012-03-07T03:23:37.437 回答
0

尝试 ：

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

因为在某些版本的 IE (< 9) 上，属性 height 没有被正确解释。

于 2012-10-11T14:08:37.683 回答
0

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

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

于 2014-06-16T04:34:05.857 回答
0

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

尝试一些像：

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

...

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

请记住根据您的需要调整 css 类的值！

于 2019-02-09T14:58:07.050 回答
0

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

于 2020-06-22T22:24:44.203 回答
-2

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

于 2013-09-15T19:36:22.577 回答
-11

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

display: table-cel

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

Vertical-Align: Middle;

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

于 2011-06-27T01:40:53.910 回答