78

line-heightプロパティは通常、垂直方向の配置を処理しますが、入力は処理しません。パディングをいじらずにテキストを自動的に中央に配置する方法はありますか？

4

16 に答える 16

101

私は自分でこの問題に遭遇しました。入力の高さを指定するのではなく、font-height と padding を組み合わせて使用​​すると、テキストが垂直方向に配置されることがわかりました。

たとえば、高さ 42 ピクセル、フォントサイズ 20 ピクセルの入力ボックスが必要だとします。入力の高さとフォント サイズの差を見つけて、それを 2 で割り、パディングをその量に設定するだけです。この場合、パディングの合計値は 22 ピクセルになります。これは両側で 11 ピクセルです。

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

これにより、垂直方向に完全に配置された 42 ピクセルの高さの入力ボックスが得られます。

それが役立つことを願っています。

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

（入力ステートメントの後の＆nbspを想像してください）

IE 7は、私が試したすべてのCSSハックを無視します。IEにのみパディングを使用することをお勧めします。1つの特定のブラウザ内でのみ機能する必要がある場合は、正しく配置するのが簡単になるはずです。

于 2008-11-29T15:30:24.827 に答える
6

私はパーティーに遅れていることを知っていますが、これがすべての主要なブラウザーで機能する簡潔な回答を探している人に役立つことを願っています (IE6 を除く。そのブラウザーのサポートを停止することを決定したため、もう見ることさえ拒否します) .

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

乾杯！JP

于 2011-08-18T22:21:35.970 に答える
2

に行きline-heightます。

タグはvertical-align、送信ボタンでは正常に機能しますが、入力フィールドのテキストでは機能しません。入力フィールドの高さの設定line-heightは、すべてのブラウザーで機能します。IE7を含む。

于 2013-05-29T10:21:40.310 に答える
1 
input[type=text]
{
   height: 15px; 
   line-height: 15px;
}

これは、垂直方向の中間位置を設定する正しい方法です。

于 2013-07-01T08:42:36.760 に答える
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 に答える
0

入力ボックスの高さを設定しないで、フォントサイズのみを設定してください。それで問題ありません

于 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) では、プロパティの高さが正しく解釈されないためです。

于 2012-10-11T14:08:37.683 に答える
-11

あなたの要素が含まれている/または表示されているブロック要素である場合：

display: table-cel

または、行の高さを固定して、垂直方向の配置を次のように設定できます。

Vertical-Align: Middle;

それ以外の場合は機能しませんが、これらの条件では問題なく機能します。

于 2011-06-27T01:40:53.910 に答える