【復活求む!】惜しくも解散してしまったバンド|J-ROCK編 >>

お世話になります

フォームのテキストボックスに表示する文字(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><!--

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="GO"><br />
<input type="text" class="mlmg-text" name="user_mail_resign" value="上に寄っちゃう"><input type="button" class="mlmg-buttton" name="resign" value="GO">
</form>
</body>
</html>

「form input テキストを上下中央」の質問画像

このQ&Aに関連する最新のQ&A

A 回答 (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-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">
<!--
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="GO" /></li>
<li><input type="text" class="mlmg-text" name="user_mail_resign" value="上に寄っちゃう" /><input type="button" class="mlmg-buttton" name="resign" value="GO" /></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の値の文字部分との位置関係を示すものではないので、実現したいスタイルの為に適切なプロパティではありません。
    • good
    • 1
この回答へのお礼

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

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

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

ブラウザにはデフォルトでそれぞれ異なる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;--------------削除--*/
}
    • good
    • 1
この回答へのお礼

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

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

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
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QINPUT TEXT内の文字位置を指定したい

例えば、<input type="text" name="hoge">というフォームを作ったとします。
そのフォーム内に文字を入力した際に、文字をフォームのどの位置に配置するか指定したいのですがどうすればよいでしょうか?

CSSで指定できると助かります。

ご回答よろしくお願いします。

Aベストアンサー

<style>
.cc{text-align:center; }
.ll{text-align:left; }
.bb{font-weight:bold; }
.red{color:red;}
</style>

<input type="text" name="hoge" value="123" style="text-align:right;"><br>
<input type="text" name="hoge" value="123" class="cc"><br>
<input type="text" name="hoge" value="123" class="ll bb red"><br>

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

Q複数のボタンを等間隔に、かつ中央に配置する

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button">
<input type="submit" value=">> 進 む>>" />
</div>

↓CSSファイルです↓
div.button {
padding-right:35px;
float:left;
}

上記設定で、ボタンの左右間隔はいい感じにあいたのですが
全体的に左に寄ってしまってます。

よろしくお願いいたします。

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button...続きを読む

Aベストアンサー

<div class="button">
<input type="submit" value="<< 戻る <<" />
<input type="submit" value="選択リセット" />
<input type="submit" value=">> 進 む>>" />
</div>

div.button {
text-align:center;
}
div.button input {
margin: 0px 20px;
}

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

QinputタグのテキストBOXだけ右寄せにする方法

inputタグのボタンやテキストBOXが混在しているページがあります。
この中のテキストBOXだけ右寄せにしたいと思っています。

原始的なJavaSctiptは使わずに、かつID指定・class指定なしに。
シンプルにきれいに、が希望です。1つ1つ指定というのはしたくないです。

昔はJavaScriptでinputタグのものを全部持ってきて
全ループさせながらtypeを判定しテキストBOXのものだけを
どうこうするとか書きましたが、原始的なので書きたくありません。
というかもう少しスマートな書き方はないものかと思い
質問をすることにしました。


スタイルシートだけで書ければいいなと思いますがこれを知りません。
input:text {…}
みたいな書き方があればいいなと思っています。

これがダメな場合でもprototypeやjquery等のライブラリを使用し
シンプルなJavaScriptの記述で実現できればそれを知りたいです。


・原始的なJavaScriptは使わない
・id・class指定のスタイルシートは使わない
・スタイルシートだけでテキストBOXだけを右寄せにする方法
・JavaScriptライブラリを使用してテキストBOXだけを右寄せにする方法
・スタイルシート単独もJavaScriptライブラリを使用しても出来ない場合は
 「出来ない」との明言を

こんな感じでお願いします。
よろしくお願いします。

inputタグのボタンやテキストBOXが混在しているページがあります。
この中のテキストBOXだけ右寄せにしたいと思っています。

原始的なJavaSctiptは使わずに、かつID指定・class指定なしに。
シンプルにきれいに、が希望です。1つ1つ指定というのはしたくないです。

昔はJavaScriptでinputタグのものを全部持ってきて
全ループさせながらtypeを判定しテキストBOXのものだけを
どうこうするとか書きましたが、原始的なので書きたくありません。
というかもう少しスマートな書き方はないものかと思い
質...続きを読む

Aベストアンサー

はじめまして。
CSSだけで実現する方法としては属性セレクタ(Attribute selectors)と呼ばれる指定方法があります。ただしこれは、一般的なモダンブラウザでは対応しているはずですがIE6以下では反応しません。

書き方としては、
[attribute=value]

inputの1行テキストボックスだけに適応させるには、
input[type="text"] { (ここにスタイル) }

という書き方ができます。
ご参考になれば幸いです。

Q文字の位置、上下のマージンがずれる

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認してみると・・・

・IE8だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE9だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む

それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか?

pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか?

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。

QJavaScriptde途中で、「exit」するには?

function kensaku(){
s_data = document.kaiin_form.input_name.value;

if(!s_data){ alert("キーワードを入れて下さい!"); }

if(s_data != dumy){ ...... }
for(i=st_no;i<=n;i++){
......省略.................;
.......省略................}
}

----------------------------------
3行目で表示されたアラートをOKで閉じても、4行目以下が実行されてしまいます。
3行目でexitするにはどうすれば良いでしょうか?

Aベストアンサー

>関数(kensaku())からは抜けられませんでした。
そうですね、勘違いしていました、f(^^;
すみません。
if(!s_data){
alert("キーワードを入れて下さい!");
return;
}
ですね。

Qテキストボックスに数字しか入力できないようにするには?

タイトルの通りなのですが、あるテキストボックスに数字しか入力できないようにしたいのですが可能でしょうか?また、

「あいうえお 12345 「」:・、¥・」

というような文字列をコピーし、そのテキストボックスにペーストした際にも数字の12345だけが残るといった事も実現したいのですが…

どなたかご存知の方いらっしゃいましたら教えて頂けると幸いです。

Aベストアンサー

>英数字

では、こんな感じで

<input type="text" onKeyup="this.value=this.value.replace(/[^0-9a-z]+/i,'')">


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング