- 締切済み
HTMLの表示を中央にしたいのですが
画面表示が中央になるよう <body> <center> ・ ・ </center> </body> としたのですが .pos1 {position:absolute; top:200px; left:550px; } で定義されている画像が当然ですが移動してくれません。 この画像も一緒に移動させるやり方を教えてください。
- みんなの回答 （2）
- 専門家の回答
みんなの回答
position:absoluteを使用してたら動かないのは当然では？ 絶対位置固定のセレクタですよ？ CSSが全く使えない環境の鯖ならcenter要素を使うのは侭在りますが、せめて「<* align="center"></*>]にした方が無難です。 CSSが使えるのなら中央に配置する要素に以下のセレクタを使用。 margin-left:auto; margin-right:auto; text-align:center;
- ORUKA1951
- ベストアンサー率45% (5062/11036)
<center>なんて、非推奨の筆頭に上げられるタグは使わないように・・ 示されたHTMLの断片では、必要な具体的な内容がまったく見えてこないのですが？？ たとえば、【以下のソースではタブを全角スペースで置き換えてありますから、テストするときは必ず「全角スペース」→「タブ」に変えること】・・なお、XHTMLです。(HTMLの場合は /> は、>に変更する。 [例１] OBJECTタグの場合 <div class="Main"> <p> ここからひとつの段落がつづく </p> <p class="mainFig"> <object data="fig1.gif" type="image/gif" width="300" height="200"> 部品をシャフトに通す </object> </p> <p> 次の段落の文章 </p> </div> [例２]IMGタグの場合 <div class="Main"> <p> ここからひとつの段落がつづく </p> <p class="mainFig"> <img src="fig1.gif" width="300" height="200" alt="部品をシャフトに通す" /> </p> <p> 次の段落の文章 </p> </div> [CSS]共通 div.Main{ width:80%; margin-left: 10%; margin-right: 10%; } div.Main p.mainFig{ text-align:center; }
お礼
回答ありがとうございました。 質問していて、自分で回答するのも不謹慎なのですが昨日風呂に入っているときに思いつきやってみましたらうまくいきました。 .pos1 {position:absolute; top:200px; left:550px; } #ctr { position: relative; margin-top: 0px; margin-right: auto; margin-bottom: auto; margin-left: auto; width: 780px; } <body> <div id="ctr"> ・ ・ </div> </body>