Bootstrapにおけるnavbar-brand中央寄せのコードの仕組み

Question

###navbar-brandの中央寄せ仕組み
現在Bootstrapの最新ver.を利用してサイトを作成しているのですが、navbar-brandクラスに記入したサイト名を画面中央に配置する方法が分からずネットで調べました。
とあるサイト(http://hacknote.jp/archives/12515/)で下のコードをcssに上書きすると中央に配置できるとあり、上書きしたところ中央に配置されました。

しかし、自分ではなぜそのコードを入力すると中央寄せにすることができるのかを理解することができませんでした。
今後の為にもその仕組みを理解したいと思いここに質問させて頂きました。
中央寄せにするにあたって打ち込んだ各々のコードの必要性を教えて頂きたいです。

###該当のソースコード

.navbar-toggle {
    z-index: 2;
}
 
.navbar-brand-center {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align:center;
    margin: auto;
}
 
@media (min-width: 768px) {
    .navbar-brand-center {
        margin-left: 0 !important;
    }
}


navbar-brandのクラスにnavbar-brand-centerを追加してあげればOKです。

Comments

[kei344]

参考にされたサイトのURLも質問文に追記してください。

[HirotoKawakami]

追記させて頂きました。

Answer 1

    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align:center;

絶対配置で左上隅から、幅100%、テキストは中央寄せ。
要はナビゲーションバー全体にかぶせています。

しかし、わたしはこのスタイルはお勧めしません。
ほかのリンク、入力欄等の上にかぶり、まともに使えなくなるからです。

Comments

[HirotoKawakami]

回答ありがとうございます。

z-indexでトグルを浮かしてその下に無理やりナビゲーションバー全体に伸ばしているということだったのですね。それが故にnavbar-brandに貼ったリンクの範囲がナビゲーションバー全体に及んでしまうという事が起きていたのですね！

とりあえずnavbar-brandにはリンクを貼らないという方向で制作を進めようと思います。
非常に助かりました。ありがとうございました。