質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

548閲覧

css marginによる中央寄せのやり方

kkkhiroki

総合スコア23

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/08/24 09:19

編集2019/08/24 10:39

前提・実現したいこと

パズルの図を作っております。
body全体を中央寄せにしたいです。

発生している問題・エラーメッセージ

検証で確認しましたが、margin:auto;が適用されていません・

エラーメッセージ

該当のソースコード

HTML

1<!DOCTYPE html> 2<html lang="ja" > 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" href="style.css"> 7 <link rel="stylesheet" href="reset.css"> 8 9 </head> 10 <body> 11 <div class="header"></div> 12 <div class="main clearfix"> 13 <div class="main-left"> </div> 14 <div class="main-right"> </div> 15 </div> 16 <div class="footer"></div> 17 </body> 18</html>

CSS

1body { 2 width: 400px; 3 height: 450px; 4 margin: auto; 5} 6 7.clearfix::after { 8 content: ""; 9 display: block; 10 clear: both; 11} 12 13.header { 14 background-color: #141f40; 15 height: 100px; 16 width: 400px; 17} 18 19.main { 20 height: 250px; 21 width: 400px; 22} 23 24.main-left { 25 height: 250px; 26 width: 150px; 27 background-color: #80bfa8; 28 float: left; 29} 30 31.main-right { 32 height: 250px; 33 width: 250px; 34 background-color: #8c2727; 35 float: left; 36} 37 38.footer { 39 height: 100px; 40 background-color: #d98d30; 41 width: 400px; 42}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2019/08/24 09:42

(質問文は編集できます)HTMLも提示してください。また、質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
kkkhiroki

2019/08/24 10:41

こちらで行うとなぜか左上にぴったりハマってしまっています。 htmlも更新いたしました。よろしくお願いいたします。
guest

回答1

0

ベストアンサー

該当コードでは左右(水平方向)の中央寄せにはなっているので,上下(垂直方向)も含めて中央寄せしたいものとして回答します.

header~footerまでの要素全体を.wrapperクラスで囲んで,次のスタイルを適用します. bodyのmargin: 0;は中央寄せとは関係なく,見栄えを理由に適用しています.

css

1body { 2 margin: 0; 3} 4 5.wrapper { 6 position: absolute; 7 top: 0; 8 right: 0; 9 bottom: 0; 10 left: 0; 11 width: 400px; 12 height: 450px; 13 margin: auto; 14} 15

html

1 <body> 2 <!-- wrapper --> 3 <div class="wrapper"> 4 <div class="header"></div> 5 <div class="main"> 6 <div class="main-left"></div> 7 <div class="main-right"></div> 8 </div> 9 <div class="footer"></div> 10 </div> 11 <!-- //wrapper --> 12 </body>

参考記事の5番目の方法を見てみてください.

投稿2019/08/24 10:45

honyao

総合スコア40

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問