如何实现导航栏中Logo与对应文字的垂直居中对齐？

1. 调整CSS实现垂直居中 #

用Flexbox布局就能快速解决这个对齐问题，修改你的CSS代码如下：

header {
  display: flex;
  align-items: center; /* 让header内的所有元素整体垂直居中 */
}

.logo {
  margin-right: auto;
  list-style: none;
  display: flex; /* 将logo容器改为flex布局 */
  align-items: center; /* 让容器内的图片和文字垂直居中 */
  gap: 10px; /* 可选：给图片和文字之间添加间距，优化视觉效果 */
}

.logo-image {
  cursor: pointer;
  height: 50px;
}

2. 修正HTML结构（可选但更规范） #

当前你的.logo列表里直接嵌套了img和a标签，不符合<ul>仅能包含<li>的HTML规范，建议调整为：

<header>
  <ul class="logo">
    <li>
      <img class="logo-image" src="images/logo.png" alt="logo">
    </li>
    <li>
      <a href="../index.html">Ultimate Tennis Team</a>
    </li>
  </ul>
  <nav>
    <ul class="nav-links">
      <li><a href="#">Leaderboard</a></li>
      <li><a href="#">Scoring</a></li>
      <li><a href="#">Sign in</a></li>
    </ul>
  </nav>
</header>

说明 #

• 你之前用的display: inline-block无法直接便捷控制垂直居中，Flexbox是现代Web布局中处理对齐问题最直观的方案。
• 你原CSS里的.logo li样式完全没生效，因为HTML结构里.logo下并没有<li>标签。

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