ブートストラップ - ドロップダウンメニューのアイコンとテキストの整列

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; 
    }