css - 垂直对齐固定高度输入框内的文本不显示 : table or padding?

Question

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

Answer 1

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

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

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

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