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

Bootstrap ナビゲーション バーのブランド ロゴを中央揃え

永続的な中央揃えのブランド ロゴを持つ Bootstrap 3 ナビゲーションバーを作成しようとしています。 「ブランド」クラス スタイルを使用した現在のアプローチでは、ロゴは部分的に整列しますが、他のナビゲーションバー要素のレイアウトが乱れます。

これを解決するには、別の戦略を検討してください。

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

この CSS:

1. .navbar をposition:relativeに設定して、その絶対位置を許可します。
2. .brand を絶対に配置し、左端の中央に配置します: 50%;。
3. 中央揃えを無効にするために、margin-left を -50px (ロゴの幅の半分に従って調整) に設定します。

このアプローチにより問題が修正され、正確なロゴが提供されます。他のナビゲーションバー要素を妨げることなく中央に配置されます。動作例については、更新された Fiddle を参照してください。

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