Wie zentriere ich meine Navbar?

Question

Ich habe hier schon mal nachgeschaut, aber nichts hat wirklich funktioniert. Ich benutze Bulma Framework, von dem ich glaube, dass es relativ unbekannt ist, aber ich hatte gehofft, dass du mir helfen könntest, die Markenverbindung auf der Navbar zu zentrieren. Das ist, was ich habe es jetzt:

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

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

ich einen Link auf Codepen haben, so dass es sichtbar gemacht werden kann:

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

Beachten Sie, dass die Schriftart wird nicht angezeigt.

Answer 1

Sie müssen nur die richtige display für die navbar einstellen. Derzeit verwendet Bulma Flex Layout. Jetzt die flex Clearing- und es block machen verwenden es funktioniert:

.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

Ich weiß nicht, ob seine der Fall ist (vielleicht habe ich es falsch verstanden wird), aber Sie können zu navbard-brand Eigenschaft hinzufügen margin: auto

Answer 3

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

Answer 4

Nun, Bulma verwendet flex. Sie könnten versuchen, ein anderes navbar Produkt nach dem Logo hinzufügen, wenn Sie das Logo

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

halten wollen, und dann können Sie die flex Eigenschaft dieses Elements ändern (nur dieser Artikel) zu

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

, so dass diese Gegenstand besetzt den Rest der Räume. Scheint für mich zu arbeiten.