HTMLのマージン（中央寄せ）がしたいです。

前提・実現したいこと

コンテンツを中央寄せしたいです。

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

それぞれのコンテンツがrightなら画面右にleftなら画面左端に行ってしまいます。

該当のソースコード

HTMLのコード

HTML<!DOCTYPE
1<html lang="en">
2<head>
3   <meta charset="UTF-8">
4   <meta name="viewport" content="width=device-width, initial-scale=1.0">
5   <title>Document</title>
6   <link rel="stylesheet" href="top1.css">
7</head>
8<body>
9   <div class ="wrapper">
10       <div class="header">header</div>
11       <div class="left">left</div>
12       <div class="right">rights</div>
13   </div>
14   <div class="footer">footer</div>
15</body>
16</html>```
17
18CSSのコード
19```CSS
20.header {
21   height: 100px;
22   width: 400px;
23   background-color: #141f40;
24}
25
26.left {
27   float: left;
28   height: 250px;
29   width: 150px;
30   background-color:#80bfa8;
31}
32
33.right {
34   float: right;
35   height: 250px;
36   width: 250px;
37   background-color: #8c2727;
38}
39
40.footer {
41   height: 100px;
42   width: 400px;
43   background-color: #d98d30;
44}
45* {
46   margin: 0 auto;
47}```
48
49
50### 補足情報（FW/ツールのバージョンなど）
51
52よろしくお願いします。

K_3578

2021/03/22 06:27 編集

ソースコードはMarkDownの<code>ブロック内に貼り付けてご提示ください。質問は編集できますので。下記が例です。 ```HTML <!DOCTYPE html> <html> </html> ```

miyabi_pudding

2021/03/22 06:28

> コンテンツを中央寄コンテンツとはどの要素を指しているのでしょうか？また、floatは、質問者さんの意図があって指定していますか？

shochanyaho

2021/03/22 06:36

はい！かしこまりました。 floatは同じdiv内に入れなければ下に行くかと思い指定しただけで特に意味はありませんm(_ _)m

miyabi_pudding

2021/03/22 06:43 編集

"コンテンツ"が何を指しているのか明示してください。 floatは、その理由で使うなら、厄介すぎるプロパティなので、使うのをやめた方がよいかと。余計に、思うようなレイアウトの実現が困難になります。

K_3578

2021/03/22 06:47

＠質問者さん htmlとcssの<code>ブロック間に1行スペースを空けてあげてくれると助かります。それと、「htmlのコード」、「cssのコード」という風に書いてくれているのですが、それは<code>ブロックの ```HTML←ここに言語名を書いてくれればそれでOKです。ソースコード ```

hatena19

2021/03/22 07:22

全部中央寄せしたいなら、floatをすべて削除すればいいですが、たぶんそれが希望のレイアウトではないような気がする。希望のレイアウトを画像で提示できませんか。エクセルとかペイントとかで簡単に作成できますので。

行動規範の内容に同意します

回答1件

ベストアンサー

こういうことかな？

css
1.wrapper {
2  width: 400px;
3  margin: 0 auto;
4  display: flex;
5  flex-wrap: wrap;
6}
7
8.header {
9  height: 100px;
10  width: 400px;
11  background-color: #141f40;
12}
13
14.left {
15  height: 250px;
16  width: 150px;
17  background-color:#80bfa8;
18}
19
20.right {
21  height: 250px;
22  width: 250px;
23  background-color: #8c2727;
24}
25
26.footer {
27  height: 100px;
28  width: 400px;
29  margin: 0 auto;
30  background-color: #d98d30;
31}