1. ホーム
  2. css

固定高さの入力フィールド内のテキストを、display: table や padding を使わずに縦に揃えるには?

2023-07-29 14:22:55

質問

line-heightプロパティは通常、垂直方向の整列の面倒を見ますが、入力の場合はそうではありません。パディングを使用せずに、自動的にテキストを中央揃えにする方法はありますか?

どのように解決するのですか?

Opera 9.62, Mozilla 3.0.4, Safari 3.2 (for Windows) では、入力フィールドと同じ行にテキストまたは少なくとも空白を置くと、解決します。

<div style="line-height: 60px; height: 60px; border: 1px solid black;">
    <input type="text" value="foo" />&nbsp;
</div>

(入力文の後の&nbspを想像してください)

IE 7は、私が試したすべてのCSSハックを無視します。 IEではpaddingを使用することをお勧めします。ある特定のブラウザだけで動作する必要がある場合、正しい位置に配置することが容易になるはずです。