我无法在下拉菜单中将图标与文字对齐。我使用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> <?php echo $_SESSION['username'] ?> <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文件。
答案 0 :(得分:1)
你可以使用以下css:
.dropdown-menu > li > a > i{
position:relative;
top:2px;
}
答案 1 :(得分:0)
我为此做了一项工作:
.icorrect {
padding: 3px;
margin-right: 5px;
}
<ul class="dropdown-menu" role="menu">
<li><a href="underconstruction.html"><i class="material-icons icorrect">settings</i> Preferències</a></li>