부트 스트랩 - 드롭 다운 메뉴에서 아이콘으로 텍스트 정렬

Question

드롭 다운 메뉴에서 텍스트와 아이콘을 정렬하지 않습니다. 나는 그것을하기 위해 부트 스트랩 프레임 워크의 CSS를 사용한다.

목표는 아이콘이 드롭 다운 메뉴의 텍스트 옵션에 정렬된다는 것입니다.

현재보기 :

텍스트 하단에있는 아이콘의 중앙을 중심으로 어떤 옵션이 있습니까? 나는 이것이 최선의 선택이라고 생각한다.

HTML 코드 :

<!-- NAVIGATION --> 

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li class="dropdown marges-opciones-left"><a href="#" class="dropdown-toggle" 
     data-toggle="dropdown" role="button" aria-expanded="false"><i class="material-icons" style="font-size: 20px" >face</i> &nbsp; <?php echo $_SESSION['username'] ?>&nbsp; <i class="material-icons" style="font-size: 20px" >list</i></a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="underconstruction.html"><i class="material-icons">settings</i> Preferències</a></li> 
      <li><a href="underconstruction.html"><i class="material-icons">lock</i> Canviar password</a></li> 
      <li class="divider"></li> 
      <li><a href="logout.php"><i class="material-icons" style="font-size:15px">power_settings_new</i> Log out</a></li> 
      </ul> 
     </li> 
     </ul> 

    </div> 
    </div> 
</nav> 

나는 때문에 넣지 않는 CSS 코드는 표준 부트 스트랩 CSS 파일입니다.

Answer 1

당신은 CSS를 사용할 수 있습니다 :

.dropdown-menu > li > a > i{ 
     position:relative; 
     top:2px; 
    }