物化图标定位

Question

我有一个使用物化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