如何解决CSS导航栏内图片与文字无法对齐的问题

问题原因 #

• 给.logo img 配置了float: left属性，浮动元素会脱离正常文档流，相邻的文字仅会和浮动元素的底部基线对齐，无法实现垂直居中
• 图片作为行内替换元素，默认vertical-align属性值为baseline，即使不使用浮动，默认也会和文字基线对齐而非居中
• 图片高度设置为60px，导航栏nav的min-height仅为8vh，视口高度较低时导航栏高度小于图片高度，也会引发布局错位

修复方案 #

移除浮动配置，改用Flex布局控制logo区域内的图文对齐即可，修改后的CSS代码如下：

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

.logo {
  color: rgb(21, 168, 144);
  text-transform: uppercase;
  letter-spacing: 10px;
}

/* 新增h4的布局配置 */
.logo h4 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px; /* 可根据需求调整图文间距 */
}

.logo img {
  width: 50px;
  height: 60px;
  margin: 0 0 0 15px;
  /* 删掉原有的float: left配置 */
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* 调整最小高度，避免导航栏高度小于图片高度 */
  min-height: max(8vh, 70px);
  font-family: "Poppins", sans-serif;
  background-color: rgb(245, 245, 245);
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 30%;
}

.nav-links li {
  list-style: none;
  padding: 20px 40px;
}

.nav-links a {
  color: black;
  text-decoration: none;
  letter-spacing: 2px;
  font-size: 15px;
}

HTML代码无需修改即可实现图文垂直居中对齐的效果。

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