반응 형 부러 트랩 내비게이션에서 링크를 수직으로 정렬하는 데 문제가 발생했습니다.

Question

저는 잠시 동안 테이블에서 머리를 숙였습니다. 거기에 간단한 해결책이나 내가 누락 된 핵이 있다고 생각합니다. 링크 주변의 여백과 여백, 주위의 컨테이너 및 여백 조정을 시도했습니다. 나는 그들이 화면 크기에 관계없이 navbar에서 수직으로 중심에두기를 원합니다. 뷰포트 크기를 조정하면 바로 위아래로 이동합니다. 내 코드는 다음과 같습니다 :

/* Style for Navbar/Header */ 
 
nav.navbar { 
 
    padding: 0 1% 0 1%; 
 
} 
 

 
.navbar, 
 
.dropdown-menu { 
 
    background-image: url(../images/pw_maze_black_@2X.png); 
 
} 
 

 
.navbar .navbar-nav > li > a:hover, 
 
.navbar .navbar-nav > li > a:focus, 
 
.dropdown-menu > li > a:hover, 
 
.dropdown-menu > li > a:focus { 
 
    background-color: #656864 !important; 
 
    color: white; 
 
} 
 

 
ul.nav.navbar-nav.navbar-right.collapse.navbar-collapse { 
 
    background: red; 
 
    margin-top: 5%; 
 
} 
 

 
.navbar .navbar-nav > li > a { 
 
    font-family: "bodoni mt condensed", serif; 
 
    font-size: 3.6vw; 
 
    color: #a5a7a4; 
 
    padding-top: 60px; 
 
    padding-bottom: 60px; 
 
} 
 

 
.dropdown-menu > li > a { 
 
    line-height: 100%; 
 
    font-family: "bodoni mt condensed", serif; 
 
    font-size: 2.5vw; 
 
    color: #a5a7a4; 
 
} 
 

 
.links-container { 
 
    
 
} 
 

 
#logo-bar { 
 
    width: 100%; 
 
} 
 

 
.navbar-toggle { 
 
    background-color: #a5a7a4; 
 
    position: static; 
 
    padding: 2%; 
 
    margin-top: 61px; 
 
    margin-right: 40px; 
 
    margin-bottom: 0; 
 

 
} 
 

 
div.navbar-header.nav.navbar-nav { 
 

 
} 
 

 
.icon-bar { 
 
    background-color: white; 
 
} 
 

 
/* End of navbar style */

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-static-top"> 
 
     <div class="container-fluid"> 
 
      <div class="navbar-header col-sm-4"> 
 
       <a class="" href="index.html"><img id="logo-bar" class='col-sm-4' src="images/logo-bar.svg" alt="Arrow's Edge Design Logo"></a> 
 

 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
      <span class="sr-only">Toggle Navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
      </div> 
 
      <div class="links-container"> 
 
      <ul class="nav navbar-nav navbar-right collapse navbar-collapse"> 
 
       <li><a href="index.html" class="option">Home</a></li> 
 
       <li><a href="our-services.html" class="option">Our Services</a></li> 
 
       <li><a href="#" class="option" data-toggle="dropdown">About Us<span class="caret"></span></a> 
 
        <ul class="dropdown-menu"> 
 
         <li><a href="blog.html">Blog</a></li> 
 
         <li><a href="our-work.html">Our Work</a></li> 
 
         <li class="divider"></li> 
 
         <li><a href="https://www.facebook.com/arrowsedgedesign/">Facebook</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="contact-us.php" class="option">Contact Us</a></li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
    </nav> 
 

 
    <!-- end of HTML for navbar -->

Answer 1

당신은 메뉴 바 요소의 라인 높이을 변경하여이 작업을 수행 할 수 있습니다.

.navbar .nav li a { 
    line-height: 50px; 
} 

각 관측점에 대해 원하는대로 50px 값을 변경하면 텍스트는 항상 수직 가운데에 있어야합니다.