Bootstrap Navbar ブランドロゴを中央に配置するにはどうすればよいですか?

Bootstrap Navbar のブランド ロゴを中央に配置する

Bootstrap Navbar をカスタマイズする場合、ブランド ロゴの配置がよく問題になります。デフォルトでは、ロゴは中央に配置されない場合があります。完璧なセンタリングを実現する手順は次のとおりです。

1. 絶対配置用のコンテナを作成します。

   • ナビゲーションバーを div でラップします。 「navbar」をクラス化し、その位置を次のように設定します"relative."

2. ブランドに絶対位置を追加:

   • ブランド ロゴの位置を設定します (クラス"brand") を "absolute" に、その左のプロパティを50%。

3. マージン調整:

   • ブランドに負のマージン左プロパティを追加します (50 に相当)ロゴの幅の %。これにより、ページのサイズ変更中にロゴが中央に配置されたままになります。

4. インライン ブロック表示:

   • ブランドの表示プロパティを設定します「ブロック」して、他のナビゲーションバーと適切に位置合わせします。

修正された CSS は次のとおりです:

.navbar {
    position: relative;
}
.brand {
    position: absolute;
    left: 50%;
    margin-left: -50px !important;
    display: block;
}

このアプローチでは、ナビゲーションバーのレイアウトの整合性を維持しながら、ブランド ロゴを効果的に中央に配置します。

以上がBootstrap Navbar ブランドロゴを中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。