dポイントプレゼントキャンペーン実施中！

おしえて

html,css 全体的に真ん中寄せにする方法２

解決済

  • 質問者：ハコ2222
  • 質問日時：
  • 回答数：4件

すみません、前と同じ質問になってしまうのですが、、
どうしてもサイトの内容が真ん中寄せにできません。
検証でみると、右側に謎の空間があります。
これって中央寄せになっていないということですよね？
わかりやすいかわかりませんが、画像を添付します。

以前ここで教えていただいた時は下記でできたのですが、今回はできません。
なぜでしょうか？
body {
width: 100%;
max-width: 1000px;
margin-right: auto;
margin-left: auto;
}

「html,css 全体的に真ん中寄せにす」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： naokita
  • 回答日時：

前回の質問で、max-width:1000px;の提案をした回答者です。

その節はどうも。

最大幅が1000pxですよ！
なので、このセンター寄せは、1000px以上で機能しますので、
貴方の表示環境（一番上のResponsive▼ [1000]×[1268]の左側の）[1000]の方の横幅を「1500」ぐらいに仮想設定してみましょう！
右側の||のつまみを広げても良いでしょう（幅[1000]の数字が連動して大きくなるはずです）
そうすればセンターに動くなる可能性があります。
最大幅が1000pxだから、余白が無いのです！

そして、
bodyへのCSSではなく、（１～３さんがご指摘のように）
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; /* この１行で分かりやすいようにしているだけ/最後に削除しよう */
}
</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が原因では有りません！！
その原因は、別のコンテンツが入り込んでいるからでしょう・・・
例えば、１つの例で、
・右カラムなど（右の枠です）、foatしてくるコンテンツを配置したのでしょう・・・
・padding-right:○○○;など、右スペースを開けるCSSを設置している。
    • good
    • 1
    • 件
通報する

No.3

  • 回答者： t_fumiaki
  • 回答日時：

中央寄せは、そう簡単では無いですよ。


提示したcssではbodyそのものが中央寄せで有って、その通りにbodyは中央にいるのです。

bodyの下の要素を、body内で中央寄せする必要があります。
No.1様の様にしても、wrapperがbody内で中央に寄るだけで有って、wrapper下のコンテンツが中央に寄る訳では有りません。

さらに、wrapperを100%としてしまうと、bodyと同じ幅になる訳だから、結果、何も変わりません。

つまり、親要素に対してどうか、なんです。

wrapperを80%幅にして、さらにその下のコンテンツ群の幅を指定して中央配置、って具合に極細かにしないと、思った様な結果は出ません。

先ずは、コンテンツの配置デザインを紙の上に描いて、親子関係を決めて、配置をどうするかを決めないと、提示された情報だけではキッチリ中央位置は無理です。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。

初心者で大変申し訳ございませんが、おっしゃってくださっていることを理解できません。
＞先ずは、コンテンツの配置デザインを紙の上に描いて、親子関係を決めて、配置をどうするかを決めないと、提示された情報だけではキッチリ中央位置は無理です。
これは、ただ単に左右に余計な余白を作りたくないということなんです、、

通報する
お礼日時：2020/07/21 17:09

No.2

  • 回答者： naktak
  • 回答日時：

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>
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： wanderer1
  • 回答日時：

<body>ではなく、bodyの下にラッパーと呼ぶ<div>を入れて、それにCSSで設定を入れるとうまくいきます。



<body>

<div class="wrapper">

　　　ここにコンテンツを入れる。

</div>

</body>



.wrapper {
width: 100%;
max-width: 1000px;
margin-right: auto;
margin-left: auto;
}

これでやってみてください。
    • good
    • 1
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

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

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

おすすめ情報