Question

行高属性通常用于垂直对齐，但不用输入。有没有办法自动居中文本而不玩填充？

Answer 1

我自己遇到了这个问题。我发现没有指定输入高度，但使用font-height和padding组合，会产生垂直对齐的文本。

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

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

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

希望有所帮助。

Answer 2

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

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

其中36px是您输入的高度。

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

（想象一下输入语句之后的＆amp; nbsp）

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

Answer 4

我知道我迟到了，但希望这会帮助任何寻找简洁答案的人在所有主流浏览器上工作（除了IE6，我们已决定停止支持该浏览器，所以我甚至拒绝查看它了。）

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

喝彩！ JP

Answer 5

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

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

Answer 6

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

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

Answer 7

尝试：

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

因为在某些版本的IE（＆lt; 9）中，属性高度未被正确解释。

Answer 8

经过多次搜索和挫折后，当使用固定高度（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;
}

Answer 9

转到line-height。

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

Answer 10

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

Answer 11

我就是这样做的。

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

然后在你的CSS文件中，

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

那应该适合你。

Answer 12

派对上晚了，但是如果你有盒子大小的话，目前的答案将无法奏效：边框设置（这些天很多人都为表格元素做了）。

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

Answer 13

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

尝试类似的东西：

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

...

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

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

Answer 14

我只是在MaterialUI的文本输入中进行此操作。将padding-top: 0.5rem添加到输入样式对我有用。虽然这是在调整填充，但至少您不必担心调整更新，而不必担心不同的断点。

Answer 15

提前抱歉简单回答......

只需删除标题文字，然后使用输入占位符作为标签的标题。一些视觉和css工作之后，你的表单将看起来紧凑和用户友好。我知道这些缺点，但这将完全缓解对齐摔跤。

我实际上正在构建一个包含WordPress中的多步骤和css进度条...基于流行的Contact Form 7插件，它看起来很棒。如果你想要截图，请告诉我。

干杯！

LaddtheImpaler

Answer 16

如果你的元素是包含/或带有这样的显示的块元素：

display: table-cel

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

Vertical-Align: Middle;

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

在固定高度的输入字段中垂直对齐文本而不显示：table或padding？

16 个答案: