实现图标定位

Question

我有使用Materialise CSS的侧边菜单。它有三个菜单项，每个菜单项都有一个图标。我的问题是图标太高 - 图标的底部与文本的底部一致。我希望它是这样，图标垂直位于文本的中间。以下是我的看法：

<li class="logout-btn"><a href="#"><i class="material-icons">power_settings_new</i> Logout</a></li>

以下是侧边栏导航中的内容：

如果有人知道一个很棒的修复方法！

Answer 1

尝试使用垂直对齐

 i.material-icons {
      vertical-align: middle;
 }

如果这不起作用，请尝试将文本换行到文本

<i class="material-icons">power_settings_new</i> <span>Logout</span>

然后在CSS中

 i.material-icons , i.material-icons + span {
      vertical-align: middle;
 }

Answer 2

更改自：

<i class="material-icons"> 

到：

<i class="material-icons left">

可在此处找到更多信息：https://materializecss.com/buttons.html