CSSのdivで何故かボックスセンタリング出来ない

Question

CSSのdivで何故かボックスセンタリング出来ません。全体を中央に寄せたいと思っています。質問させていただきます。まず、全体をdivで囲い、 #contena { margin-right: auto; margin-left: auto; width: 1000px; height: 1000px; } と、記述したのですが、何故かボックスセンタリングになりません。しかも、ナビゲーションだけ、センタリングされています。下記に、htmlを記述します。4000文字入るはずですが、これも何故か400文字程の数が入りきらないので、途中まで記載します。詳しい方がいましたら、よろしくお願いします。名称未設定-1

ORUKA1951 · Accepted Answer

スタイルシートの一部を

div.header,div.section,div.footer{width:85%;min-width:600px;margin:0 auto;}
↓max-widthを追加
div.header,div.section,div.footer{width:85%;min-width:600px;max-width:950px;margin:0 auto;}
したほうが良いでしょう。

別途用意する画像./imagesホルダに入れる
index_r2_c2.gif width="850" height="79"
index_r5_c6.jpg width="198" height="129"
index_r4_c3.gif width="110" height="92"
　画像名は、ファイル名を見ただけで内容が分かるようなものをつけないと後で困ります。
　[例]2013_Mar_hanami_shugou.jpg　とかね。

スタイルシートは、./styleSheet2フォルダーに
standard.css
という名称で入れる。下記のふたつのスタイルシートもそれぞれの名前で入れて、HTMLを下記のように変更する。
　これでブラウザの表示メニューから[スタイルシート]で反転を選択すると、HTMLはそのままでデザインが変わります。好きなだけ様々なスタイルが指定できます。
★大事なことは、デザインをイメージしたら、fireworksにしろdreamweverにしろIlustltorにしろ、スライスで切り取ったとしても、それはそれぞれを要素にしてしまう事です。
　将来、どのようにデザインを変更しようとHTMLを触る必要はありませんし、HTML自体もスタイルシートを気にせず編集が出来ます。そして何よりも、HTMLもスタイルシートも簡潔で分かりやすくなりますし、検索エンジンもページの内容を正確に理解してくれます(SEO)から、多くの人に利用してもらえるでしょう。聴覚障害者がスクリーンリーダーを用いて読み上げさせても、点字端末で点字出力しても、視覚弱者が「スタイルシートを使用しない」表示をさせても・・

<link rel="stylesheet" type="text/css" media="screen" href="./styleSheet2/standard.css">
　↓変更
<link rel="stylesheet" type="text/css" href="./styleSheet2/default.css">
<link rel="stylesheet" type="text/css" media="screen" href="./styleSheet2/standard.css" title="標準">
<link rel="Alternate StyleSheet" type="text/css" media="screen" href="./styleSheet2/reversal.css" title="反転">

[default.css]
@charset "UTF-8";
html,body{margin:0;padding:0;}
p{text-indent:1em;}
h1,h2,h3,p{margin:0;line-height:1.6em;}
h1{text-align:center;}

[reversal.css]
@charset "UTF-8";
body{background-color:black;}
a:link{color:red;}
a:visited{color:maroon;}
a:active{color:red;}
div.header,div.section,div.footer{
width:90%;min-width:480px;max-width:950px;margin:0 auto;
background-color:navy;color:white;}
div.header h1{text-align:center;margin-top:40px;}
div.header h1 img{display:block;width:100%;height:auto;}
div.header div.nav ol,div.header div.nav ol li,
div.contentTable ol,div.contentTable ol li{
display:block;list-style:none;
margin:0;padding:0;
text-align:center;
}
div.header div.nav{
position:fixed;top:0;left:0;
width:100%;line-height:40px;
z-index:100;
}
div.header div.nav ol{
width:90%;height:46px;min-width:480px;max-width:950px;margin:0 auto;
background-color:navy;
}
div.header div.nav ol li{
display:inline-block;
width:20%;
}
div.header div.nav ol li a{
display:block;width:100%;height:100%;
border:outset 3px navy;
text-decoration:none;background-color:blue;color:white;
font-size:30px;font-weight:bold;
}
div.header div.nav ol li a:hover{
background-color:aqua;
color:black;
}
div.header div.nav ol li a:active{
border-style:inset;
}
div.section{position:relative;}
div.section h2,div.section div.section{
margin:0 180px 0 10px;
background-color:transparent;
}
div.section div.section h3,div.section div.section p{
margin:0 1em;
}
div.section div.section{
min-height:100px;
min-width:0;
width:auto;
clear:right;
}
div.section div.section:after{
content:"";
clear:left;
display:block;
}
div.section div.section p.figure{
text-indent:0;text-align:center;
width:205px;height:135px;
float:left;
padding:5px;
background-color:white;
margin:20px 10px;
}
div.section div.aside{
position:absolute;
top:10px;right:0;
width:160px;height:100%;
line-height:40px;
text-align:center;
}
div.contentTable ol li{line-height:40px;}
div.contentTable a{
display:block;
text-decoration:none;
background-color:blue;
width:120px;
height:40px;
margin:5px auto;
border-radius:5px;
}
div.aside form{display:block;line-height:1.6em;margin-top:30px;border-top:solid 3px white;padding-top:10px;}

ORUKA1951 · Answer

こちらはスタイルシートです。文字コードは同じくUTF-8です。
★ウィンドウ幅600px以上なら表示され、広いウィンドウでは中央に表示されます。
　スマホでも幅広ディスプレイでも利用できます。もちろんスクリーンリーダーや点字端末、携帯電話でも利用できますし、印刷だとシンプルに
★HTMLにはデザイン要素はありませんから、HTMLに手を加えることなく、まったく異なるデザインに出来ます。

せっかくの高価なCS6、そのままでは宝の持ち腐れどころか、角をためて牛を殺すことになりかねません。オーサリングツールを使えば、HTMLやCSSを知らなくてもウェブページが作れる(と言っているホームぺじビルダーのような糞もありますが）、DreamWeaver7
Fireworksは、そんな誇大広告は言ってません。ウェブオーサリングツールをうまく使うためには、テキストエディタでウェブページが作成できる人以上に、HTMLやCSSの知識が必要なのですよ。
　一度、基本から学んでください。そのほうがはるかに早道です。

@charset "UTF-8";
html,body{margin:0;padding:0;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:85%;min-width:600px;margin:0 auto;}
h1,h2,p{margin:0;line-height:1.6em;}
h1{text-align:center;}
div.header h1 img{display:block;width:100%;height:auto;}
div.header div.nav{margin:40px 0;}
div.header div.nav ol,div.header div.nav ol li,
div.contentTable ol,div.contentTable ol li{
display:block;list-style:none;
margin:0;padding:0;
text-align:center;
}
div.header div.nav ol li{
display:inline-block;
width:15%;
margin:0 3%;
line-height:28px;
}
div.header div.nav ol li a{
display:block;width:100%;height:100%;
text-decoration:none;background-color:blue;color:white;
}
div.section{position:relative;}
div.section h2,div.section div.section{
margin:0 0 0 180px;
background-color:orange;
}
div.section div.section h3,div.section div.section p{
margin:0 1em;
}
div.section div.section{
min-height:100px;
min-width:0;
width:auto;
clear:right;
}
div.section div.section:after{
content:"";
clear:right;
display:block;
}
div.section div.section p.figure{
text-indent:0;text-align:center;
width:205px;height:135px;
float:right;
background-color:white;
padding:5px;
margin:20px 10px;
}

div.section div.aside{
position:absolute;
top:0;left:0;
width:160px;height:100%;
background-color:orange;
line-height:40px;
text-align:center;
}
div.contentTable ol li{line-height:40px;}
div.contentTable a{
display:block;
text-decoration:none;
background-color:rgb(255,128,0);
width:120px;
height:40px;
margin:5px auto;
border-radius:5px;
}
div.aside form{display:block;line-height:1.6em;position:absolute;bottom:10px;}

ORUKA1951 · Answer

最初に基本的な問題点を指摘しておきます。 HTML4.01の仕様書の　⇒14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )の項目に・テキストを画像に置き換えて表現する。・余白制御のために画像を用いる。・ページレイアウトの目的で表を用いる。・HTMLでページを作らずにプログラムに頼る。指摘されている、これらすべての問題のある典型的な例になってしまっています。　★とても大事なところなので読んでおくこと(必須!!) 　DreamWeabverにしろfireworksにしろ、とても優れたオーサリングツールですが、HTMLやCSSを知らないと、テキストエディタで作成する場合よりも酷いものを作ってしまいます。　簡単なサンプルをあげておきます。 ★HTMLには、文書構造だけ書きます。文章を書いては適当な要素で括る。なければ文書構造を保管する目的でdivやspanをidやclass名をつけて使います。　この状態で、HTML Lintなどを使ってチェックしておきます。正しくかけていないとスタイルシートでデザインしてもブラウザ間で異なったりします。 ★HTML4.01strictで文字コードUTF-8で記述してあります。 ★タブは＿に置換してあるので戻すこと。 ★スタイルシートなしで素のHTMLの確認をする。　上記、Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# )で、右上のDATAタブをクリックして書きあがったHTMLをペーストしてチェックします。＿＿Je suis delisieux ラウンドトリップ更新＿＿＿＿＿＿＿

＿＿

見出し

＿＿

＿＿＿

This Month PicUp

＿＿＿

入学式

＿＿＿

テキストルールを選択し、テキストエリアにテキストを入力して、フォントやサイズなどの書式を設定します。

＿＿

＿＿＿

This Month PicUp

＿＿＿

テキストルールを選択し、テキストエリアにテキストを入力して、フォントやサイズなどの書式を設定します。

＿＿

＿＿＿

This Month PicUp

＿＿＿

テキストルールを選択し、テキストエリアにテキストを入力して、フォントやサイズなどの書式を設定します。

＿＿

＿＿＿

This Month PicUp

＿＿＿

山登り

＿＿＿

略

＿＿

＿＿＿

＿＿＿＿

四月
三月
二月
一月

＿＿＿

＿＿＿＿＿

＿

ORUKA1951 · Answer

折角のCS6が役立ってません。
今晩にでもサンプルあげて起きます。
とりあえず
　⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )
でそれをチェックしてみてください。

outbrave · Answer

#contena はセンタリングされています、border:solid 1px #f00; でも入れて確認してください。

問題は position を使っているから基準が #contena の中ではなくなっていること。

position を使わず、padding か margin で余白を調整すればいいです。

また、id や class 名は、a ～ z で始まる半角英数でなければなりませんので、修正してください。

CSSのdivで何故かボックスセンタリング出来ない

スタイルシートの一部を

こちらはスタイルシートです。

最初に基本的な問題点を指摘しておきます。

折角のCS6が役立ってません。

#contena はセンタリングされています、border:solid 1px #f00; でも入れて確認してください。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング