- 締切済み
inputが出てきたら必ずセンター表示に・・・
inputのボタンが出てきた場合、必ずページのセンターに表示されるようにしたいのですが、inputに左右をautoで設定しても効果がありません・・・。 例えば、<div class="center"><input ・・・・></div>とすればセンタリングできるのですが、あまりいいやり方ではないのでは？？と思っています。 どなたかCSSなどで一発ですべてに反映させる方法をご存知のかたいらっしゃいましたら、アドバイスいただけないでしょうか？ よろしくお願いします。
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- himajin100000
- ベストアンサー率54% (1660/3060)
<!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>
- himajin100000
- ベストアンサー率54% (1660/3060)
<!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> <!-- コメント:インライン要素をbodyの下に直接おいては駄目 input要素はインライン要素だから 直接はおけない --> <p id="inputtest"><input type="text" value="初期値"/></p> <!-- 両方指定してみる --> <p id="inputtest2"><input type="text" value="初期値"/></p> </body> </html>
お礼
ありがとうございます。 やはりインライン要素の外にブロック要素を置いて、1つ1つその都度設置を行わないといけないんですね・・・。 もっと効率的な方法があると良いのですが・・・。