내 Navbar를 가운데에 배치하려면 어떻게합니까?

Question

전에 여기에서 살펴 보았지만 아무 것도 실제로 작동하지 않았습니다. 저는 Bulma Framework를 사용하고 있습니다.이 프레임 워크는 비교적 전례가 없지만 네비게이션에 브랜드 링크를 집중시키는 데 도움이되기를 바랍니다. 이것은 내가 지금 그것을 가지고 무엇을 : 글꼴이 표시되지 않습니다

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 레이아웃을 사용합니다. 이제 플렉스를 삭제하고 만들 것 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은 flex를 사용하고 있습니다. 당신이

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

로고를 유지하려는 경우 당신은 로고 후 다른 navbar 항목을 추가하려고 할 수 있습니다 그리고 당신은

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

그래서

이 그이 항목 (전용이 항목)의 flex 속성을 변경할 수 있습니다 항목이 나머지 공백을 차지합니다. 나를 위해 일하는 것 같습니다.