Bootstrap - 下拉菜单对齐图标与文本

Question

我无法在下拉菜单中将图标与文字对齐。我使用bootstrap框架的css来做它。

目标是图标与下拉菜单中的文本选项对齐。

当前观点：

是否有任何选项可以将图标中间置于文本底部？我认为这将是最好的选择。

HTML code：

<!-- 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代码因为是标准的bootstrap css文件。

Answer 1

你可以使用以下css：

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

Answer 2

我为此做了一项工作：

1. 打开CSS文件
2. 添加以下内容：

.icorrect {
     padding: 3px; 
     margin-right: 5px;
}

1. 向您遇到问题的每个图标添加icorrect类。例如：

<ul class="dropdown-menu" role="menu">
            <li><a href="underconstruction.html"><i class="material-icons icorrect">settings</i>  Preferències</a></li>