Logo与导航栏无法对齐求助：尝试CSS属性后仍未解决

问题出在你的HTML结构上——<nav>元素是放在.navbar容器外面的，而你给.navbar设置的display: flex和align-items: center只能作用于容器内部的元素，所以导航栏根本没被纳入flex布局的控制范围，自然没法和logo垂直对齐。

只需要调整HTML结构，把<nav>移到.navbar容器里，就能让原有的CSS生效：

修正后的HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title> STUDENT HUB </title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="navbar">
    <div class="logo">
      <img src="image/logo.png" width="125px" alt="this is an image">
    </div>
    <!-- 把nav移到navbar内部 -->
    <nav>
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Commu</a></li>
        <li><a href="">Report</a></li>
        <li><a href="">Help </a></li>
        <li><a href="">Account</a></li>
      </ul>
    </nav>
  </div>
</body>

</html>

保留原CSS即可生效 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.navbar {
  display: flex;
  align-items: center;
  padding: 20px;
}

nav {
  flex: 1;
  text-align: right;
}

nav ul {
  display: inline-block;
  list-style-type: none;
}

nav ul li {
  display: inline-block;
  margin-right: 20px;
}

a {
  text-decoration: none;
  color: #555;
}

p {
  color: #555;
}

这样调整后，.navbar的flex布局会同时包含logo和导航栏，align-items: center就能让两者在垂直方向居中对齐，nav的flex:1会让它占据剩余空间，再配合text-align:right就能把导航项靠右排列，和教程里的效果一致。

内容的提问来源于stack exchange，提问作者ashi