导航栏内Logo与导航菜单无法垂直居中的问题求助

问题说明 #

当前高度为65px的导航栏内，Logo与"About Services Contact"菜单未实现垂直居中，现有相关CSS代码如下：

.nav {
  width: 100%;
  height: 65px;
  position: fixed;
  /* line-height: 10px; */
  text-align: center;
  border: 1px solid black;
}

.nav div.logo {
  float: left;
  width: auto;
  /* height: auto; */
  padding-left: 2rem;
  /* padding-bottom: 3rem; */
  border: 1px solid blue;
  /* padding-bottom: 0px; */
}

.nav div.logo a {
  text-decoration: none;
  color: #fff;
  font-size: 2.5rem;

}

.nav div.logo a:hover {
  color: #00e676;
}

.nav div.main_list {
  height: 65px;
  float: right;
  border: 1px solid purple;
}

.nav div.main_list ul {
  width: 100%;
  height: 65px;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav div.main_list ul li {
  width: auto;
  height: 65px;
  padding: 0;
  padding-right: 3rem;
}

.nav div.main_list ul li a {
  text-decoration: none;
  color: #fff;
  line-height: 65px;
  font-size: 2.4rem;
}

.nav div.main_list ul li a:hover {
  color: #00e676;
}


.navTrigger {
  display: none;
}

.nav {
  padding-top: 20px;
  /* padding-bottom: 20px; */
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

解决方法 #

问题核心是.nav设置了padding-top:20px，挤占了内部元素的垂直空间，同时Logo容器未配置垂直对齐规则。按以下步骤修改即可实现需求：

1. 移除导航栏顶部内边距
   删除.nav中的padding-top:20px，让导航栏内部恢复完整的65px垂直空间。

2. 为Logo容器添加垂直居中样式
   给.nav div.logo添加以下代码，通过flex布局实现可靠的垂直居中：

   .nav div.logo {
     float: left;
     width: auto;
     padding-left: 2rem;
     border: 1px solid blue;
     /* 新增垂直居中代码 */
     height: 65px;
     display: flex;
     align-items: center;
   }
   

   若仅需适配单行文本，也可以用line-height:65px替代上述flex代码，效果一致。

3. 菜单部分无需额外修改
   菜单的<a>标签已设置line-height:65px，移除.nav的padding-top后，会自动在65px高度内垂直居中。

修改后的核心CSS片段 #

.nav {
  width: 100%;
  height: 65px;
  position: fixed;
  text-align: center;
  border: 1px solid black;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  /* 已移除padding-top:20px */
}

.nav div.logo {
  float: left;
  width: auto;
  padding-left: 2rem;
  border: 1px solid blue;
  height: 65px;
  display: flex;
  align-items: center;
}

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