vue路由器链接中的中心项目

Question

我想创建一个包含router-link个项目的导航栏。每个导航项的左侧应有一个图标，右侧应有一个文本。

例如Firebase导航栏

我自己的导航栏看起来像这样

，您会看到项目未垂直居中。我创建了一个小提琴来显示我的代码，唯一重要的文件是 Navbar.vue

https://codesandbox.io/s/31jw7ql3ym

当我删除图标时，文本会很好地居中。添加图标时如何使两个项目居中？

Answer 1

您可以通过将flex添加到父元素中来实现：

Data[Data['ColumnName'].isnull()]

根据您的情况，将其添加到display: flex; align-items: center; 元素中：

您在 Navbar.vue

中的代码

a

Answer 2

使用vertical-align属性在CSS中实现该功能

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