Html 如何在水平导航栏中对齐浮动徽标

我试图将我的徽标与列表水平对齐，但徽标会竖起，我可以使用边距将其向下移动，但这是对齐的正确方法还是有更好的方法

---

这是我的代码，我如何正确地修复它？

我创建了一个JSFIDLE来帮助您可视化此响应：

在.nav bar类中，您需要确保它是display:flex，并使用align content和align items与居中对齐。align items是您正在寻找的特定CSS元素：我不会使图像成为绝对的，而是让它遵循其父级的灵活性

display: flex;
justify-content: space-between;
align-content: center;
align-items: center;

---

如果您有任何问题，请随时发表评论。

在.logo样式中，说display:flex；并对齐项目：居中；。如果您不明白，请转到。我希望这有帮助

你想水平对齐还是垂直对齐？请提供一个可复制的示例，说明您希望实现的目标。我不理解您的问题。你想存档什么？如果你做一点调查，这个网站上已经有很多问题，还有很多其他关于你主题的问题。使用div搜索图像的水平对齐或div的水平对齐或元素的水平对齐等。您将找到实现这一点的几种方法。选择最适合你特殊需要的。抱歉@UnReal G。我在发布我的答案后看到了你的答案。你的也行。

.nav-wrap {
  clear: both;
  overflow: auto;
  justify-content: center;
  display: flex;
}
.nav-bar {
  width: 80%;
  border: 1px solid red;
}
.logo {
  float: left;
  line-height: 70px;
  position: absolute;
}
.nav-list {
  float: right;
}
ul li {
  display: inline-block;
  padding: 10px;
  font-size: 20px;
  font-family: raleway;
}

img {
  height: 32px;
  width: 172px;
  object-fit: contain;
}

display: flex;
justify-content: space-between;
align-content: center;
align-items: center;