[Bootstrap] navbar-brand を中央(center)に配置する方法

Navbar の.navbar-brandを中央揃えにする。

#デフォルト

デフォルトの Navbar は以下のような感じ。

基本は左寄せになっているが、.navbar-rightを指定することで右寄せにすることもできる。
もちろん中央揃えはない。

#中央揃え

中央揃えは用意されていないので自前で調整する。

#テキスト

floatを無しにして中央揃えにして幅をフルにする。

.navbar-header {
    float: none;
    text-align: center;
}
.navbar-brand {
    width: 100%;
}

一応、センタリングできたけど、幅をフルにしたことでリンクまでフルになってしまった。.navbar-brand以外の要素を置く場合はいい感じで整える必要がある。

#画像

テキストの時とほぼ同じだが、.navbar-brand直下のimgmarginautoにしてやる必要がある。

.navbar-header {
    float: none;
}
.navbar-brand {
    width: 100%;
}
.navbar-brand > img {
    margin-left: auto;
    margin-right: auto;
}

#終わり

テキストも画像もリンクの横幅までフルになってしまうのが少々気になる。

そもそも、タイトル(navbar-brand)を中央に配置して、メニューを置くことはないかもしれないが、仮にタイトル以外の要素も共存させるのであれば、調整用のタグを追加するなどしてやる必要が出てくるだろう。

ともあれ基本的なセンタリングはこれで良しとする。