締切済み

inputが出てきたら必ずセンター表示に・・・

2007/06/01 16:44

inputのボタンが出てきた場合、必ずページのセンターに表示されるようにしたいのですが、inputに左右をautoで設定しても効果がありません・・・。例えば、<div class="center"><input ・・・・></div>とすればセンタリングできるのですが、あまりいいやり方ではないのでは？？と思っています。どなたかCSSなどで一発ですべてに反映させる方法をご存知のかたいらっしゃいましたら、アドバイスいただけないでしょうか？よろしくお願いします。

yuyukina
お礼率66% (251/380)

HTML
回答数2
ありがとう数1

みんなの回答 （2）
専門家の回答

みんなの回答

himajin100000
ベストアンサー率54% (1660/3060)

2007/06/01 17:24 回答No.2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>実験</title> <style type="text/css"> div#nestedblock{ width:80%; display:block; margin:auto; background-color:green; } div#nestedblock p{ display:block; width:90%; margin:auto; /* ブロックレベル要素だからpを移動させたかったら */ background-color:pink; } div#nestedblock2{ width:80%; display:block; margin:auto; background-color:red; } div#nestedblock2 p{ display:block; width:90%; margin:auto; text-align:center; /* 中のテキストが動く*/ background-color:yellow; } </style> </head> <body> <div id="nestedblock"> <p>ふにゃふにゃ</p> </div> <div id="nestedblock2"> <p>ふにゃふにゃ</p> </div> </body> </html>

質問者

お礼 2007/06/01 17:27

ありがとうございます。やはりインライン要素の外にブロック要素を置いて、1つ1つその都度設置を行わないといけないんですね・・・。もっと効率的な方法があると良いのですが・・・。

ログインすると、全ての回答が全文表示されます。

himajin100000
ベストアンサー率54% (1660/3060)

2007/06/01 17:11 回答No.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>実験</title> <style type="text/css"> p{ display:block; /* p要素はブロックレベル要素 */ width:70%; background-color:red; } span{ display:inline; /* span要素はインライン要素 */ background-color:yellow; } input{ display:inline; /* input要素はインライン要素 */ } p#blocktest{ margin:auto; /* pが真ん中に動くが、spanはp内で左揃え */ } p#inlinetest{ text-align:center; /* pは動かない、spanはp内で中央揃え */ } p#pcdatatest{ text-align:center; /* 普通の文字はインライン要素扱い */ } p#inputtest{ text-align:center; /* input要素はインライン要素 */ } p#inputtest2{ /* 両方指定してみると？ */ margin:auto; text-align:center; } </style> </head> <body> <p id="blocktest"><span>ほげふが</span></p> <p id="inlinetest"><span>ほげふが</span></p> <p id="pcdatatest">ほげふが</p>  <p id="inputtest"><input type="text" value="初期値"/></p>  <p id="inputtest2"><input type="text" value="初期値"/></p> </body> </html>

ログインすると、全ての回答が全文表示されます。