- ベストアンサー
中央寄せができない原因とは？
- 中央寄せができない原因とは？要約1
- 中央寄せができない原因とは？要約2
- 中央寄せができない原因とは？要約3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
id="hedder"のdivが画面の中央に来ないという意味であれば、CSSの #hedderdiv に position:relative; を指定しましょう。 position:absolute; を指定した場合、親要素が position:static; だと画面全体の左上から top left 等で位置指定をしなければいけませんが、親要素が position:static; 以外だと親要素の位置を基準に表示位置が決まります。
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
absoluteでmargin: 0 auto;意味無いです。 そのまえに、例でないとしたらそのようなHTML書かないほうが良いです。 divは必要最小限に、使うときは「文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」に使用します。 先でボタングループ以外でデザインしようとしたら不釣合いですし、そもそもHTMLのメンテナンスだ大変になる。 <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="/">Top</a></li> ＿＿＿＿<li><a href="/Prodacts">製品</a></li> ＿＿＿＿<li><a href="/News">ニュース</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>本文</h2> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿</div> </body> このような場合、absoluteは使うべきではありません。他の要素と切り離されて、後続の要素はその要素は存在し無いように振舞います。 単純に div.header,div.section,div.footer{ width:80%;max-width:780px;min-width:600px; margin:0 auto; padding:10px; } div.header div.nav{ width:83%;min-width:780px; margin:0 auto; text-align:center; min-height:200px; } /* だけで期待通りになるはず、しかもリキッドですからスマホも幅広ディスプレイもＯＫ */ /* ウィンドウ幅狭かったり、視覚障害者がフォントを拡大しても追随してくれる */ /* 色をつけておくと */ body{background-color:gray;} div.header,div.section,div.footer{background-color:#3F3;} div.nav{background-color:#C63;} ちなみに ・classにしたのは、header,section,footerはページ内に何度も登場しうるので class名はHTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )とその用途ですから、HTML5にするときは <body> ＿<header> ＿＿<h1>タイトル</h1> ＿＿<nav> ＿＿＿<ol> ＿＿＿＿<li><a href="/">Top</a></li> ＿＿＿＿<li><a href="/Prodacts">製品</a></li> ＿＿＿＿<li><a href="/News">ニュース</a></li> ＿＿＿</ol> ＿＿</nav> ＿</header> ＿<section> ＿＿<h2>本文</h2> ＿</section> ＿<footer> ＿＿<h2>文書情報</h2> ＿</footer> </body> になるだけ。 せっかくデザインをスタイルシートで行うのですから、HTMLは文書構造だけ記述するので楽になるはずです。 ⇒構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
