すみません、前と同じ質問になってしまうのですが、、
どうしてもサイトの内容が真ん中寄せにできません。
検証でみると、右側に謎の空間があります。
これって中央寄せになっていないということですよね?
わかりやすいかわかりませんが、画像を添付します。
以前ここで教えていただいた時は下記でできたのですが、今回はできません。
なぜでしょうか?
body {
width: 100%;
max-width: 1000px;
margin-right: auto;
margin-left: auto;
}
No.4ベストアンサー
- 回答日時:
前回の質問で、max-width:1000px;の提案をした回答者です。
その節はどうも。最大幅が1000pxですよ!
なので、このセンター寄せは、1000px以上で機能しますので、
貴方の表示環境(一番上のResponsive▼ [1000]×[1268]の左側の)[1000]の方の横幅を「1500」ぐらいに仮想設定してみましょう!
右側の||のつまみを広げても良いでしょう(幅[1000]の数字が連動して大きくなるはずです)
そうすればセンターに動くなる可能性があります。
最大幅が1000pxだから、余白が無いのです!
そして、
bodyへのCSSではなく、(1~3さんがご指摘のように)
body配下へのdivへのCSSに変更しましょう!
以下が見本です。
試しに、新規でテストファイル(test.html)を作り、それを「幅1200pxぐらい以上の」ワイド画面にして、表示テストしてみましょう。
何がどう動作しているのか違いがわかると思います。以下がHTMLの内容です。
<html>
<head>
<style>
div.main{
width: 100%;
max-width: 1000px;
margin-right: auto;
margin-left: auto;
border: 1px solid #000;background:yellow; /* この1行で分かりやすいようにしているだけ/最後に削除しよう */
}
</style>
</head>
<body>
<div>ここは幅 100%になり、ヘッダーにするのに良いでしょう。不要なら削除</div>
<div class="main">
ここが幅 1000pxになり、中央寄せになる
</div>
<div>ここは幅 100%になり、フッターにするのに良いでしょう</div>
</body>
</html>
bodyへのCSSではなく、bodyの内包である特定のdiv枠をセンター寄せにしているのです。
ヘッダーとフッターもセンター寄せにするなら、
ヘッダーとフッターも<div class="main">の中に入れちゃって下さい!
(HTML5では、<div>ではなく、<header>や<footer>の方が良いですけどね)
-----------
そして、また本題に戻りますが、
幅[1000]以下での表示で、右側に不要なコンテンツがある原因は、提示のCSSが原因では有りません!!
その原因は、別のコンテンツが入り込んでいるからでしょう・・・
例えば、1つの例で、
・右カラムなど(右の枠です)、foatしてくるコンテンツを配置したのでしょう・・・
・padding-right:○○○;など、右スペースを開けるCSSを設置している。
No.3
- 回答日時:
中央寄せは、そう簡単では無いですよ。
提示したcssではbodyそのものが中央寄せで有って、その通りにbodyは中央にいるのです。
bodyの下の要素を、body内で中央寄せする必要があります。
No.1様の様にしても、wrapperがbody内で中央に寄るだけで有って、wrapper下のコンテンツが中央に寄る訳では有りません。
さらに、wrapperを100%としてしまうと、bodyと同じ幅になる訳だから、結果、何も変わりません。
つまり、親要素に対してどうか、なんです。
wrapperを80%幅にして、さらにその下のコンテンツ群の幅を指定して中央配置、って具合に極細かにしないと、思った様な結果は出ません。
先ずは、コンテンツの配置デザインを紙の上に描いて、親子関係を決めて、配置をどうするかを決めないと、提示された情報だけではキッチリ中央位置は無理です。
回答ありがとうございます。
初心者で大変申し訳ございませんが、おっしゃってくださっていることを理解できません。
>先ずは、コンテンツの配置デザインを紙の上に描いて、親子関係を決めて、配置をどうするかを決めないと、提示された情報だけではキッチリ中央位置は無理です。
これは、ただ単に左右に余計な余白を作りたくないということなんです、、
No.2
- 回答日時:
bodyはmax-widthの範囲内で中央揃えと言っていますが、
bodyの中身を中央揃えにするなどとは一言も定義されていません。
bodyのcssに
border: 1px solid #000;
を追加してみれば
状況が分かるかと思います。
中身を左右中央揃えにしたいならば、flexboxなどを使います。
https://knowledge.cpi.ad.jp/tech/169/
<html>
<head>
<style>
body {
width: 100%;
max-width: 1000px;
margin-right: auto;
margin-left: auto;
border: 1px solid #000;
}
.flex_center {
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div class="flex_center">
test
</div>
</body>
</html>
No.1
- 回答日時:
<body>ではなく、bodyの下にラッパーと呼ぶ<div>を入れて、それにCSSで設定を入れるとうまくいきます。
<body>
<div class="wrapper">
ここにコンテンツを入れる。
</div>
</body>
.wrapper {
width: 100%;
max-width: 1000px;
margin-right: auto;
margin-left: auto;
}
これでやってみてください。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS htmltとcssのコードで 1 2022/11/26 13:37
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
aタグに直接style=""で:hoverを...
-
CSSのtransform: translate(-50...
-
<h1>タグの後の行間を詰めたい。
-
ホームページビルダー 空白の...
-
なぜ左に寄っているの?
-
HTMLフォームのSELECTの幅を一...
-
INPUT TEXT内の文字位置を指定...
-
text-alignの解除の方法
-
パソコンのみで反映される余白...
-
Formタグのブロックの高さについて
-
macとwindowsのレイアウト崩れ...
-
インラインフレームの表示位置...
-
div入れ子による height100%
-
cssでheight: auto;を指定して...
-
CSSで見出し(タイトル)行の右...
-
IEでCSSの中央寄せが効かない
-
エクセルでサイズに合ったもの...
-
htmlでテーブル内にテキストボ...
-
Excelの列の幅(ピクセル)につい...
-
Excel で等間隔で縦線を引きた...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
HTMLフォームのSELECTの幅を一...
-
<h1>タグの後の行間を詰めたい。
-
なぜ左に寄っているの?
-
インラインフレームの表示位置...
-
text-alignの解除の方法
-
CSSでh1とその下の文字との行間...
-
Formタグのブロックの高さについて
-
端から端まで横線を引きたい
-
FireFoxで見るとブラウザの幅に...
-
macとwindowsのレイアウト崩れ...
-
ホームページビルダー 空白の...
-
<legend>で表示されるタイトル...
-
INPUT TEXT内の文字位置を指定...
-
CSSで、height:100%の中央寄せ
-
CSSの設定
-
テキストボックスの様に文字の...
-
フッターだけが真ん中に行って...
-
スタイルシートでh1の属性行間...
おすすめ情報