Navbarをどのようにセンターに置くのですか？

Question

私はここで前に見ましたが、実際には何も働いていませんでした。 私はBulma Frameworkを使用していますが、これは比較的前例のないことですが、Navbarにブランドリンクを集中するのを助けてくれることを願っていました。これは私が今ではそれを持っているものである：フォントが表示されないこと

https://codepen.io/anon/pen/BwrWwg

注：

.navbar { 
    background-color: #0a0a0a; 
    color: white; 
    height: 9%; 
} 

.navbar .navbar-brand > .navbar-item, 
.navbar .navbar-brand .navbar-link { 
    color: white; 
    font-family: 'Wavehaus'; 
} 

私はそれを可視化することができるようにCodepen上のリンクを持っています。

Answer 1

navbarには、右にdisplayを設定するだけです。現在、BulmaはFlex Layoutを利用しています。今フレックスをクリアし、それがblockを使用すること、それが働くようになります：

.navbar .navbar-brand { 
    text-align: center; 
    display: block; 
    width: 100%; 
} 

.navbar .navbar-brand > .navbar-item, 
.navbar .navbar-brand .navbar-link { 
    display: inline-block; 
} 

Answer 2

その場合ならば、私は（多分私はそれが間違った理解）知りませんが、あなたがnavbard-brandプロパティにmargin: auto

Answer 3

.navbar { 
    background-color: #0a0a0a; 
    color: white; 
    height: 9%; 
    display:flex; 
    justify-content:center; 
} 

を追加することができます

Answer 4

まあ、Bulmaはフレックスを使用しています。あなたがロゴを維持したい場合は、

< a class="navbar-item center">Table of Content</a> 

ロゴの後に別の navbarの項目を追加してみてください可能性があり、このようにするため、あなたは

.navbar-item.center { 
    flex-grow: 1; 
    flex-direction: column; 
    justify-content: center; 
} 

にこの項目（のみ、この項目）のflexプロパティを変更することができますアイテムは残りのスペースを占有します。私のために働いているようだ。