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

Bootstrap ナビゲーションバーでブランドロゴを中央に配置する

カスタマイズされた配置戦略を使用して、Bootstrap 3 ナビゲーションバーでブランドロゴを中央に配置することができます。提供されたコードは適切なデザインを提供しますが、他の navbar 要素の配置を妨げます。

<a class="brand">

これを修正するには、次の CSS を検討してください:

.navbar {
    position: relative;
}
.brand {
    position: absolute;
    left: 50%;
    margin-left: -50px !important;  /* 50% of your logo width */
    display: block;
}

このアプローチ:

• ナビゲーションバーコンテナを相対的に配置します。
• ブランドロゴを設定します
• left: 50% に設定し、ロゴの幅の半分 (margin-left: -50px) でオフセットすることにより、ロゴを水平方向の中央に配置します。
• margin-left を ! important で調整します。ブートストラップのデフォルト設定をオーバーライドします。

これにより、ロゴが常に中央に配置されるようになります。ズーム中。

フィドル: [https://fiddle](リンク)

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