固定高さの入力フィールド内のテキストを、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" />
</div>
(入力文の後の を想像してください)
IE 7は、私が試したすべてのCSSハックを無視します。 IEではpaddingを使用することをお勧めします。ある特定のブラウザだけで動作する必要がある場合、正しい位置に配置することが容易になるはずです。
関連
-
[CSSチュートリアル】カットコーナー+ボーダー+プロジェクション+コンテンツ背景色のグラデーション効果を実現するCSS
-
[css3]css3アニメーションマウスが絵の上に置かれると徐々に大きくなり、マウスが絵から離れると徐々に縮む効果
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] 画像の横のテキストを縦に揃える?
-
[解決済み] CSSのdisplayプロパティで遷移する
-
[解決済み] コンテナの幅に応じたフォントの拡大縮小
-
[解決済み] divの中のテキストを縦に揃えるにはどうしたらいいですか?
-
[解決済み] divの内容を下に揃える方法
-
[解決済み] CSS Flexboxで、"justify-items "と "justify-self "プロパティはなぜないのですか?
-
[解決済み] CSS 100% height と padding/margin の関係
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
cssで背景色の半透明化を実現する2つの方法
-
[CSSチュートリアル】カットコーナー+ボーダー+プロジェクション+コンテンツ背景色のグラデーション効果を実現するCSS
-
[CSSチュートリアル】CSSを解析して、画像のテーマカラー機能を抽出する(コツ)
-
[css3]css3はtransform-originを使用して、大きな円上のドット分布のレイアウトと回転を実現します。
-
[CSSチュートリアル]cssの位置固定コードで左右2重の位置決め
-
[css3]css3は、3つの方法のサンプルコードのテキストの点滅効果を達成するために
-
[CSSチュートリアル】CSSで炎のエフェクトを記述する方法
-
[CSSチュートリアル】ピュアCSSで作るスクロールシャドウ効果
-
[CSSチュートリアル】CSSプロパティ*-gradientの有用性を探る
-
[css3]CSS3遷移回転遠近法2D3Dアニメーションなどの効果を持つサンプルコード