ヘッダーの中央に画像を表示するにはどうすればよいですか?

Question

まず第一に、私のコードは HTML、CSS、JS の 3 つのファイルに基づいています。HTML の作成には Bootstrap 5.1.3 フレームワークを使用していることに注意してください。

私の問題は、まず第一に、事例として使用している衣料品ブランドのロゴが中央にないことです。タイトルの中央に配置するためにあらゆることを試みましたが、達成できません。また、ドロップダウン検索エンジンがあることも付け加えました、つまり、検索アイコンを押すと、右側にテキスト入力用のボックスが表示されますが、そのボックスが表示されると、ロゴも表示されます。中央に配置すると、さらに左にスクロールします (右側で検索しているため)。一体何が起こっているのかわかりません。

これはコンテナが原因である可能性が高いことはわかっていますが、ロゴ コンテナを縮小して中央に配置することも試みましたが、無駄でした。まったく同じままです。助けていただければ幸いです。このフレームワークに取り組もうとしているのですが、この細かい点がうまくいきません。

リーリー リーリー リーリー

1. 普通にロゴを中央寄せにしてみました
2. ロゴのコンテナを縮小してみました
3. コードを0からやり直してみました

CSS を変更してロゴを中央に配置したり、ロゴのコンテナを縮小したりしようと何度も試みましたが、それでも無駄で、ロゴは常に同じ部分に残ります。

これを実行すると、はい、ロゴを中央に配置することもできましたが、インクルードがタイトルと重なってしまい、タイトルの一部を選択できないことがわかりました。

Answer 1

まず、width: 100%; を .navbar-brand から削除してみてください。

次のコードも追加する必要があります:

リーリー

すべてのナビゲーション リンクを中央に配置しますが、すべての要素が要素とこのコードの間の残りのスペースを占めることになるので注意してください:

リーリー

検索入力が表示されたときにロゴが移動しないようにします。