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

Question

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

Firebase 导航栏就是一个例子

我自己的导航栏是这样的

你可以看到项目没有垂直居中。我创建了一个小小提琴来展示我的代码，唯一重要的文件是 Navbar.vue

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

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

Answer 1

您可以通过将其添加到父元素来使用 flex：

display: flex;
align-items: center;

在您的情况下，将其添加到 a 元素：

Navbar.vue 中的代码

a {
  display: block;
  text-decoration: none;
  padding: 10px;
  font-weight: 600;
  color: #b2b4b8;
  transition-property: color, background;
  transition-duration: 0.3s;
  display: flex;
  align-items: center;
}

Answer 2

使用 vertical-align 属性在 css 中实现这一点

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