- ベストアンサー
form input テキストを上下中央に表示したい
お世話になります フォームのテキストボックスに表示する文字（value）を「上下左右中央」にしたいのですが 「上下中央」ができずに困っています（IE6、firefox） ※safari3では中央になりました 以下のhtmlを書いています。 paddingやverticalなど試してみたのですが… （buttonのvertical-align:bottom;は、これが無いと上へズレてしまうので、書きました。 これも意味がわかりません。。） とても基本的なことなのですが 検索しても解決策を見つけられませんでした。よろしくお願いします。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style><!-- form input { margin-bottom:10px; color:#fff; border:none; font-size:12px; } form input.mlmg-text { width:150px; height:26px; background-color:green; padding:2px 5px; text-align:center; vertical-align:center; } form input.mlmg-buttton { width:50px; height:30px; color:#fff; background-color:blue; vertical-align:bottom; } --></style> </head> <body> <form method="post"> <input type="text" class="mlmg-text" name="user_mail" value="上下中央に配置したい"><input type="button" class="mlmg-buttton" name="join" value="ＧＯ"><br /> <input type="text" class="mlmg-text" name="user_mail_resign" value="上に寄っちゃう"><input type="button" class="mlmg-buttton" name="resign" value="ＧＯ"> </form> </body> </html>
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
少々マークアップから変えてみましたが、以下のサンプルで検証したところ、IE6/7、Firefox2/3、Safari3、Opera9.61等での結果はほぼ同じになりました。 ---------------------------------------------------------------------- 【サンプル】 ---------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>サンプル</title> <style type="text/css"> <!-- ul.hoge { list-style: none; margin: 0; padding: 0; } ul.hoge li { zoom: 100%; margin-bottom: 10px; } ul.hoge li:after { display: block; clear: left; height: 0; visibility: hidden; content: ""; } ul.hoge input { float: left; margin: 0; padding: 0; text-align: center; line-height: 100%; border: none; color: #fff; font-size: 12px; } ul.hoge input.mlmg-text { width: 150px; height: 1em; padding: 0.5em; background-color: green; } ul.hoge input.mlmg-buttton { width: 50px; height: 2em; background-color: blue; } --> </style> </head> <body> <form method="post" action="#"> <ul class="hoge"> <li><input type="text" class="mlmg-text" name="user_mail" value="上下中央に配置したい" /><input type="button" class="mlmg-buttton" name="join" value="ＧＯ" /></li> <li><input type="text" class="mlmg-text" name="user_mail_resign" value="上に寄っちゃう" /><input type="button" class="mlmg-buttton" name="resign" value="ＧＯ" /></li> </ul> </form> </body> </html> ---------------------------------------------------------------------- ポイントは以下の様な点です。 ・inputをulの子要素としてマークアップ（内容を見たところ、送信ボタンのリストの様ですので）。 ・inputの余白や行の高さ等を初期化して、textタイプとbuttonタイプのベースのスタイルを揃える。 ・inputをfloatで横並びにさせるので、親要素のliで回り込み状態をクリア。 ・textタイプとbuttonタイプの高さを揃える。高さは相対的に計算ができる様にemで指定。 buttonタイプの場合は描画領域の高さに対して自動的にセンタリングされるので2emとし、textタイプの場合は要素（valueの値の文字部分）の高さを1emと考え、残りの1emを半分づつ上下paddingとして追加。 いかがでしょうか？ ※今回の場合、"vertical-align: middle;"はinputの描画領域（ボックス）とvalueの値の文字部分との位置関係を示すものではないので、実現したいスタイルの為に適切なプロパティではありません。
その他の回答 (2)
- kiela
- ベストアンサー率50% (1/2)
ブラウザにはデフォルトでそれぞれ異なるCSSがかかっているので、まずはCSSをリセットしましょう。 /*---------------------------------------------------リセット--*/ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td{ margin:0; padding:0; } table{ border-collapse:collapse; border-spacing:0; } fieldset, img{ border:0; } address, caption, cite, code, dfn, em, strong, th, var{ font-style:normal; font-weight:normal; } ol, ul{ list-style:none; } caption, th{ text-align:left; } h1, h2, h3, h4, h5, h6{ font-size:100%; font-weight:normal; } q:before, q:after{ content:”; } abbr, acronym{ border:0; } /*--------------------------------------------------/リセット--*/ あとは下記を参考にしてください。 /*--------------"form " はこの場合あってもなくても良いので削除--*/ input { margin-bottom:10px; color:#fff; border:none; font-size:12px; vertical-align:middle;/*--------------追加--*/ text-align:center;/*------------------追加--*/ } input.mlmg-text { width:150px; height:22px;/*-----------変更--*/ background-color:green; padding-top:8px;/*--------------------変更--*/ /*text-align:center;------------------削除--*/ /*vertical-align:center;--------------削除--*/ } input.mlmg-buttton { width:50px; height:30px; color:#fff; background-color:blue; /*vertical-align:bottom;--------------削除--*/ }
お礼
ありがとうございます！ いま手元で試してみたところ、 height:22px;/*-----------変更--*/ padding-top:8px;/*--------------------変更--*/ の変更だけで、うまく行きました。感謝！
vertical-alignの中央値はmiddleです。 heightとline-heightをem値で指定してはどうでしょう？
補足
★すみません、なぜか（？）何もせずして、IE6では上下左右中央になっていました。未解決はfirefox3のみとなります。よろしくお願いします。 metametamuさま、さっそくのアドバイスをありがとうございます！ ＞vertical-alignの中央値はmiddleです。 ぎゃ！おはずかしい…ありがとうございます けれど vertical-align:middle; も効果ありませんでした。 input type="text"の側のpaddingをとり、 text、button の heightとline-heightを3emにしたところ、 残念ながら、、上下中央にはならず、かつ、textとbuttonの高さが ズレてしまいました。 （これも意味が分からないのですが、ともにpx指定にし、かつ textにpaddingを設定すると、高さが合うのです。）
お礼
abrilさま、ありがとうございます いただいたhtmlで、見事、実現しました！ リストをfloatさせて、かつafterでclearするのですね 専門家さんならではのポイントまで教えていただいて、 質問内容以上のことを、勉強させていただきました。 本当にありがとうございました