Q&A
「marginを使った左右の中央寄せができません。」
どこを中央寄せしたいんですか？
具体的に提示してもらわないとわかりません。
marginを使った左右の中央寄せができません。
調べて行いましたが、適用されていません。
よろしくお願いします。
HTML
1<!DOCTYPE html> 2<html lang="ja" > 3<head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" href="css/style.css"> 7 <link rel="stylesheet" href="css/reset.css"> 8</head> 9<body> 10 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 18</body> 19</html> 20
CSS
1body{ 2 width: 400px; 3 height: 450px; 4 margin: 0 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}
過去にも同様の質問があります。何故に解決しないうちに繰り返すのでしょうか？
回答1件
0
ベストアンサー
すみません、CSSが続いているのを確認せずに回答してしまいました。
チェックするポイントとしてはCSSが正しく読み込まれているか。
href="css/style.css"
これはhtmlファイルと同じ階層にcssフォルダがあり
その中にstyle.cssファイルがあるという状態です。
また検証ツールとしてchrome デベロッパーツールというものがあるので
そちらを使うと原因が特定しやすくなります。
CSSの適用優先順位なども可能性としてはあると思います。
あとはブラウザの対応がされているかを調べるなら
https://caniuse.com
こちらの環境で表示してみたところ左右の中央寄せできているのかな？という感じでしたが
解釈が間違っていましたら追記お願いします。
投稿2019/08/28 15:15
編集2019/08/29 00:47
総合スコア468
あなたの回答
tips
プレビュー
