前提・実現したいこと
パズルの図を作っております。
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}
(質問文は編集できます)HTMLも提示してください。また、質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
問題が再現しませんでした。
https://jsfiddle.net/Lhankor_Mhy/m7tbcwa0/
こちらで行うとなぜか左上にぴったりハマってしまっています。
htmlも更新いたしました。よろしくお願いいたします。
やはり問題が再現しませんでした。
https://jsfiddle.net/Lhankor_Mhy/m7tbcwa0/
このページでもやはり左上にぴったりはまって表示されていますか?
回答1件
あなたの回答
tips
プレビュー