Q&A
前提・実現したいこと
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件
0
ベストアンサー
原因はこれですね。
html
1<seciton id="mainBox">
<seciton>タグは存在しないのでインライン表示される為margin:autoでセンタリングできません。
インラインをセンタリングする場合はtext-align:centerですが、タグを
<section>に直したほうが良いでしょう。
あと以下の記述おかしいです。
<iframe src="<iframe src="https://www.google.com/m(略)
投稿2021/12/21 11:21
総合スコア1128
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2021/12/22 06:40