Html 如何使徽标和导航栏水平对齐？

我想将左侧的徽标与右侧的导航链接水平对齐

主要是，我在

.nav wrapper

上使用了

display:flex

，并使用了

align items:center

。然而，在徽标和导航链接元素之间似乎仍然有一点不对齐，我似乎不知道如何正确纠正。非常感谢您在这方面的帮助

*，
*：：之前，
*：：之后{
框大小：边框框；
保证金：0；
填充：0；
}
身体{
字体系列：“SegoeUI”；
}
李{
列表样式：无；
}
a{
文字装饰：无；
}
.导航包装器{
显示器：flex；
证明内容：之间的空间；
左侧填充：30px；
对齐项目：居中；
背景色：rgba（255、255、255、0.5）；
边框：1px纯蓝色；
}
.右菜单{
显示器：flex；
右侧填充：12px；
}
.右菜单.右菜单项{
显示器：flex；
}
.右菜单.右菜单项李a{
填充：0 12px；
}
.标志{
宽度：80px；
高度：80px；
}
.主包装{
背景图片：url（“/assets/lucrezia-carnelos-gvc7MK4gnDk-unsplash.jpg”）；
背景重复：无重复；
背景位置：中心；
背景尺寸：封面；
位置：绝对位置；
高度：100vh；
宽度：100%；
排名：0；
z指数：-1；
}
.主包装。欢迎留言{
位置：相对位置；
最高：30%；
}

italki：在线学习一门语言





精通任何语言

根据您的需求，从10000多名教师中选择一对一课程
目标和兴趣
>

我已经创建了演示，这里链接：

事实上它真的水平居中，红边证明了这一点

当然，也许您认为红色边框框中的字体不是垂直中间，您可以添加如下样式：

。右菜单{
页边顶部：-2px；
}

---

任意负边距值。

之所以出现这种情况，是因为

标记和父

标记之间存在不必要的空间

是一个内联元素，因此发生了这种情况

要删除空格，请按如下所示将

标记为

块

元素，或执行垂直对齐

.logo {
  display: block;

  width: 80px;
  height: 80px;
}

或者将父级

设置为flex样式

a {
  display: flex;
  flex-direction: column;
}

---

你能附上当前输出的屏幕截图吗？你好！给你，还有