form input テキストを上下中央に表示したい

解決済

質問者：asummer
質問日時：2009/03/04 14:41
回答数：3件

お世話になります

フォームのテキストボックスに表示する文字（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-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style></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件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： abril
回答日時：2009/03/04 18:33

少々マークアップから変えてみましたが、以下のサンプルで検証したところ、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-transitio …
<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">

</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
- 件

通報する

この回答へのお礼

abrilさま、ありがとうございます
いただいたhtmlで、見事、実現しました！
リストをfloatさせて、かつafterでclearするのですね

専門家さんならではのポイントまで教えていただいて、
質問内容以上のことを、勉強させていただきました。
本当にありがとうございました

通報する

お礼日時：2009/03/04 20:33

No.3

回答者： kiela
回答日時：2009/03/04 19:10

ブラウザにはデフォルトでそれぞれ異なる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;--------------削除--*/
}

- 1
- 件

通報する

この回答へのお礼

ありがとうございます！
いま手元で試してみたところ、
height:22px;/*-----------変更--*/
padding-top:8px;/*--------------------変更--*/
の変更だけで、うまく行きました。感謝！

通報する

お礼日時：2009/03/04 20:34

No.1

回答者： noname#83877
回答日時：2009/03/04 14:51

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を設定すると、高さが合うのです。）

補足日時：2009/03/04 15:23

通報する