Вертикальное выравнивание и высота строки не работает

Question

Я занимаюсь разработкой веб-сайт, я начал без начальной загрузки и сделал простую навигационную панель, там я использовал высоту строки и вертикальное выровнять так:

.navigation { 
padding:0; 
margin:0; 
background:#efefef; 
position:fixed; 
list-style:none; 
box-shadow: 0 2px 5px 0 lighten(#000, 55%) ; 
top:0; 
z-index:998; 
width:100%; 
text-align:center; 
font-size:12px; 
font-family: 'Montserrat', sans-serif; 
li { 
    display:inline-block; 
    vertical-align:middle; 
    line-height:15px; 
    padding: 15px 25px; 
    a{ 
     display:inline-block; 
     color:#6d6d6d; 
     text-decoration:none; 
     &:hover{ 
      color: lighten(#6d6d6d, 20%); 
     } 
    } 
} 

Теперь после использования начальной загрузки его больше не работает, вот разметка после начальной загрузки:

<div id="custom-navbar" class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-brand"> 
      <img src="imgs/logo.png"> 
     </div> 
     <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
     MENU 
     </button> 
     <div class="collapse navbar-collapse navHeaderCollapse"> 
      <ul id="custom-navbar-ul" class="nav navbar-nav navbar-right"> 
       <li><a href="#">HOME</a></li> 
       <li><a href="#">BENEFITS</a></li> 
       <li><a href="#">APPS<br>WIDGET</a></li> 
       <li><a href="#">PLACEMENT<br>GUIDE</a></li> 
       <li><a href="#">BLOG</a></li> 
       <li><a href="#">ABOUT</a></li> 
       <li><button type="button" id="sign-up" class="btn btn-sm"><a href="#">SIGN UP</a></button></li> 
       <li><button type="button" id="sign-in" class="btn btn-sm"><a href="#">SIGN IN</a></button></li> 
      </ul> 
     </div> 
    </div> 

</div> 

И разметка:

#custom-navbar{ 
height:80px; 
background:#efefef; 
box-shadow: 0 2px 5px 0 lighten(#000, 55%) ; 
z-index:9999;} 

#custom-navbar-ul{ 
text-align:center; 
font-size:12px; 
li{ 
    display:block; 
    vertical-align:middle; 
    line-height:15px; 
    padding:.7% 8px; 
}} 

Я увидел несколько ответов, где он попросил использовать таблицы, и я это сделал, но все равно не могу сказать, что может быть проблемой?

Answer 1

Попробуйте стилизации это нравится:

#custom-navbar-ul { 
    text-align:center; 
    font-size:12px; 
} 
#custom-navbar-ul li { 
    display:block; 
    vertical-align:middle; 
    line-height:15px; 
    padding:.7% 8px; 
}