向navbar添加图片导致文本对齐失效的原因与解决方法

对齐失效的原因 #

行内元素默认的垂直对齐方式为vertical-align: baseline：

• 普通文字类行内元素（比如你的a标签内的文字）的基线位于文字底部位置，你设置了line-height: 75px，文字会自动在75px高度内居中。
• 图片属于替换行内元素，高度为75px的图片基线位于自身的最底部，插入后会把整行的基线向下拉扯，最终导致旁边的文字整体向下偏移，对齐效果被破坏。

另外注意你原CSS的选择器写法有误：你给nav元素设置的id是navbar，对应的CSS选择器应该是#navbar而不是navbar，否则规则不会生效。

解决方案 #

方案1：最小改动修复 #

直接给导航栏内的图片设置垂直对齐为居中即可：

#navbar_img {
  vertical-align: middle;
}

如果需要适配更多行内元素，也可以给导航栏所有子元素统一设置：

#navbar > * {
  vertical-align: middle;
}

方案2：使用Flex布局（更推荐） #

将导航栏改为Flex布局，不需要依赖line-height实现居中，后续新增元素也不容易出现对齐问题，修改CSS如下：

#navbar {
  display: flex;
  justify-content: center; /* 子元素水平居中 */
  align-items: center; /* 子元素垂直居中 */
  height: 75px;
  gap: 16px; /* 可自定义子元素之间的间距 */
}

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