web-dev-qa-db-ja.com

表示なしで固定高さの入力フィールド内のテキストを垂直に揃える：テーブルまたはパディング？

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

cssxhtml
72
Logan Serman

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つの特定のブラウザー内でのみ動作する必要がある場合、正しく配置するのが簡単になるはずです。

11
Gerhard Dinhof

私は自分でこれを試していないが、設定してみてください：

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

36pxは入力の高さです。

62
Chris Hawes

私はパーティーに遅れていることを知っていますが、これはすべての主要なブラウザで機能する簡潔な答えを探している人の助けになることを願っています（IE6を除く、私たちはそのブラウザのサポートを停止することを決めたので、私はそれを見ることさえ拒否します） 。

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

乾杯！ JP

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

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

3
Web Designer cum Promoter

私の意見では、このページの投票数が最も多い回答が最良の回答ですが、彼の計算は間違っていて、コメントすることはできませんでした。

テキスト入力ボックスは、周囲の1ピクセルの境界線を含め、正確に40ピクセルにする必要がありました。もちろん、すべてのブラウザでテキストを中央に垂直に揃えたいと思いました。

1ピクセルの境界線上部
1ピクセルの境界線の下
8ピクセルの上部パディング
8ピクセルの下パディング
22ピクセルのフォントサイズ

1 + 1 + 8 + 8 + 22 = 40ピクセル。

覚えておくべきことの1つは、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で機能している場合、6、7、および9でも同様に機能するはずですが、テストしていません。お知らせください。それに応じてこの投稿を編集します。

3
Sparky

試してください：

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

IE（<9）の一部のバージョンでは、プロパティの高さが適切に解釈されないためです。

2
Gew

line-heightに進みます。

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

1
Peter Waegemans

テキスト入力フィールドに固定高さ（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;
}
1
user275649

内側の垂直方向の配置は、フォントの高さと入力の高さに依存するため、パディングを使用して調整できます!!!

いくつか試してみてください：

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

...

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

必要に応じてcssクラスの値を調整することを忘れないでください！

0
Diego Favero

パーティーに遅れましたが、box-sizing：border-box set（多くの人が最近フォーム要素のために行っている）がある場合、現在の回答は機能しません。

IE8のボックスサイズをbox-sizing: content-box;にリセットしてから、パディング/高さの回答のいずれかを使用します。

0
GusRuss89

これが私のやり方です。

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

次に、CSSファイル内で、

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

それはあなたのために働くはずです。

0
Morningseven

入力ボックスの高さは設定せず、font-sizeのみを設定してください。

0
imikay