Bootstrapのnavbar-brandを中央寄せする

Tetsuro Aoki 2,512views 更新:2015年8月11日

navbar-brandを中央寄せする方法です。
Webで調べると結構出てくるのですが、微妙に中央からずれていたりスマートフォンだとメニューボタンが効かなくなったりといろいろ不具合があったのでそれらを解決する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です。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません