2016-12-22 16 views
0

안녕하세요 단지부트 스트랩 3 네비게이션 바 센터

.navbar .navbar-nav { 
    display: inline-block; 
    float: none; 
} 
.navbar .navbar-collapse { 
    text-align: center; 
} 

는 메뉴 바의 중심 요소를 만드는이 코드를 사용하는 대신 같은 - 새로운 CSS 스타일

.navbarAlign { 
    display: inline-block; 
    float: none; 
    text-align: center; 
} 

을하고로 퍼팅 이유를 알고 싶어 nav 요소의 클래스

</div> 
    <nav class="navbar navbar-inverse -----> navbarAlign"> <----- 
     <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="https://www.google.com" target="blank">VirusFun</a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1 "> 
      <ul class="nav navbar-nav"> 
      <li></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-center"> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
.......... 
+0

을하는 데 도움이 결과가 같다고 말하면 결과가 나타납니다. [코드 단편] (https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-http://www.intel.com/javascript-css-and-html)에서 코드 (HTML/CSS/JS)의 ** 최소 작동 예제 **를 게시하십시오. html 코드 스 니펫 /). [mcve] 및 [ask]를 참조하십시오. – vanburen

+0

문제를 설명하고, 적어도 일부 예제 코드를 제공하십시오. –

답변

1

당신이 옳은 대답을 원한다면 명확하게 묻는다면 더 낫겠지만,당신이 사용해야하는 탐색 내부의 콘텐츠를 중앙 집중화하려는 경우 : 네비게이션 바는 상위가 무엇 이제까지는 모든 요소에 영향을 미칠 것 안에 당신이 정의하는 정렬 때문에

.navbar { 
    text-align: center; 
} 

합니다.

하지만 당신은 페이지의 사용 네비게이션 바에 자체를 중앙 집중화하려는 경우 :

.navbar { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

는 희망이 당신 : 당신이 개 CSS 예제가 동일하게 생성 할 가능성이 있기 때문에 정확히 질문은 무엇