调整水平导航栏Logo尺寸并使菜单项垂直居中（非Bootstrap）

我来帮你搞定这个导航栏的问题！你要调整Logo尺寸，还要让导航菜单项占满相同的垂直空间并居中，又不能用Bootstrap，这其实用纯CSS Flex布局就能完美解决，不用折腾那些容易出问题的尺寸属性。

核心思路 #

我们用Flex布局来控制导航栏的整体对齐，让Logo的高度决定导航栏的总高度，同时让菜单项自动匹配这个高度并内部垂直居中，避免手动设置固定高度带来的适配问题。

假设你的导航栏HTML结构（类名可根据实际调整） #

<nav class="navbar">
  <!-- Logo容器 -->
  <div class="navbar-logo">
    <img src="your-logo.png" alt="网站Logo">
  </div>
  <!-- 导航菜单 -->
  <ul class="nav-menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品中心</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

对应的CSS解决方案 #

/****************************************/
/* Fixed top navbar with dropdowns */
/****************************************/
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff; /* 替换成你的导航栏背景色 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 可选，增强层次感 */
  /* 核心：Flex布局实现整体垂直对齐 */
  display: flex;
  align-items: center;
  padding: 0 2rem; /* 左右内边距按需调整 */
  /* 不固定高度，让Logo自动撑开导航栏，更灵活 */
}

/* 调整Logo尺寸 */
.navbar-logo img {
  height: 65px; /* 设置你需要的Logo高度，导航栏会自动适配 */
  width: auto; /* 保持宽高比，避免拉伸变形 */
  display: block; /* 消除图片默认的行内基线间隙 */
}

/* 导航菜单基础样式 */
.nav-menu {
  list-style: none;
  margin: 0 0 0 auto; /* 把菜单推到右侧，不需要可删除auto */
  padding: 0;
  display: flex;
}

/* 让菜单项占满垂直空间并居中 */
.nav-menu li {
  display: flex;
  align-items: center;
  height: 100%; /* 自动匹配导航栏高度（由Logo撑开） */
  margin: 0 0.5rem; /* 菜单项间距按需调整 */
}

.nav-menu li a {
  text-decoration: none;
  color: #333333; /* 替换成你的菜单文字颜色 */
  padding: 0 1rem; /* 扩展链接点击区域宽度 */
}

/* 可选：鼠标悬停效果 */
.nav-menu li:hover {
  background-color: #f5f5f5;
}

方案优势 #

• 用flex替代传统float/line-height居中，彻底避免尺寸冲突问题
• 导航栏高度由Logo自动决定，调整Logo尺寸时布局自动适配
• 菜单项通过height:100%+Flex对齐，既占满垂直空间，又让文本完美居中
• 图片设置display:block解决了常见的图片下方间隙问题

如果你之前因为手动设置固定高度导致布局混乱，这个方案完全依赖Flex的自动适配，只要调整Logo的height值，其他元素都会自动对齐，不会出现错位。

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