親要素でmargin:0 auto;としていしても全体が中央に寄らない。

前提・実現したいこと

sectionのmainBoxを中央寄せにしたい。

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

sectionのmainBoxでmargin:0 auto;と指定しているのですが、ブラウザで見ても全体が中央に寄りません。

エラーメッセージ

該当のソースコード

<HTML> ```ここに言語名を入力 <seciton id="mainBox"> <article class="subBox"> <div class="mapBox"> <iframe src="<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.085515678762!2d139.74272201566887!3d35.674896287926074!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b89b2e1b089%3A0x48c7d4fa5e528690!2z5Zu95Lya6K2w5LqL5aCC!5e0!3m2!1sja!2sjp!4v1640084720993!5m2!1sja!2sjp" width="1100" height="500" style="border:0;" allowfullscreen="" loading="lazy"></iframe> </div> <div class="textBox"> <p>テキストテキストテキストテキストテキスト</p> 　　　　　　　　　　　　　　　　<p>テキストテキストテキストテキストテキスト</p> 　　　　　　　　　　　　　　　　<p>テキストテキストテキストテキストテキスト</p> </div> </article> </seciton> ``` <CSS> ```ここに言語名を入力 #mainBox { width:1100px; margin:0 auto; }

#mainBox .subBox {
	padding-top:200px;
	
}

#mainBox .subBox .mapBox {
	margin-top:70px;
	margin-bottom:20px;
}


### 試したこと

mainBoxでtext-align:center;と指定すると中央によるのですが、文字列も全て中央に寄ってしまうので要素だけ中央寄せにしたいです。

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

回答1件

ベストアンサー

原因はこれですね。

html
1<seciton id="mainBox">

<seciton>タグは存在しないのでインライン表示される為margin:autoでセンタリングできません。
インラインをセンタリングする場合はtext-align:centerですが、タグを
<section>に直したほうが良いでしょう。

あと以下の記述おかしいです。

<iframe src="<iframe src="https://www.google.com/m(略)

サンプル
https://codepen.io/recal/pen/xxXLLGG

投稿2021/12/21 11:21

recal

総合スコア1126

退会済みユーザー

2021/12/22 06:40

ああ、すいません。こちらに質問する時の記述ミスでした。でもサンプル通りにやったらできました！ありがとうございます。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.46%

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

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

質問する

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

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