Q&A
header.inner は幅1040pxのボックスで、それが中央に配置されています。
そのボックスの中でh1やらulやらが左詰めになっています。
.innner に border: 1px solid red; とでも入れて表示してみればわかります。
headerに.headerと.innerクラスの２つをつけました。 cssには以下を記述しています。 .header { display: flex; } ### ヘディングのテキスト ul { display: flex; } .inner{ width:100%; max-width:1040px; margin:0 auto; } .innerには上記を記入することで余白が左右対称の中央に来ることを想定してましたが、 実際には画面の左半分に寄ってしまいます。 justifycontent:space-around等を使用せず中央に位置するにはどうすれば良いでしょうか？ コード<body> <header class="header inner"> <div> <h1 class="header_logo">ヘッダーロゴ</h1> <p>＠＠＠＠＠＠</p> </div> <div> <nav> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">会社概要</a></li> <li><a href="#">製品情報</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </nav> </div> <span><img src="./images/search-icon@2x.png" alt="サーチアイコン"></span> </header> </body> </html>
ご提示のコードを試してみましたが、問題が再現しませんでした。
itagagaki さんがおっしゃっているように、.inner は中央に配置されています。
申し訳ありません、具体性に欠けていました。
確かに.inner自体は中央に配置されていましたが、その中の<h1>と<p>を左に配置し、navを中央に配置、最後に<span>を一番右に配置したいのですが、全て画面左半分に固まってしまいます。
わかりました。
『justifycontent:space-around等を使用せず』とのことですが、「等」は具体的にはどういうものを使用したくないのでしょうか？
space-aroundの他にspace-betweenを使用せずに左・中央・右と分けるやり方がないものかと思いまして「等」としました。
text-alignですと確かブロック要素には効かないはずだと思うので、かといってもうすでにdisplay:flexを指定しているのでdisplay:inline-blockが使えないかと思います。
フレックスレイアウトがダメ、というわけではないのですね。
問題を把握しました。
回答1件
0
ベストアンサー
以下を追加してはどうでしょうか。
css
1.inner :nth-child(2){ 2 margin: 0 auto; 3}
投稿2021/04/24 07:48
総合スコア36981
Lhankor_Mhy様
分かりにくい質問ですみませんでした。
nth-childですね！その発想がなかったのですが、できました。
ありがとうございました！
あなたの回答
tips
プレビュー
