顶部导航栏Logo与标签对齐问题求助：如何实现同线等高？

嘿，这个问题我做项目时也踩过坑！核心原因是img和label这类行内/行内块元素默认按基线对齐，所以你给label加margin-top根本起不到垂直居中的作用——行内元素的垂直margin不会改变它在基线对齐中的位置。

下面给你几种简单高效的解决办法，按推荐程度排序：

1. 使用Flex布局（最推荐） #

Flex是现代CSS布局的首选方案，能轻松实现元素垂直居中，后续扩展导航栏元素也更灵活。只需要修改.topnav的样式：

.topnav { 
  background-color: #DCF5E1; 
  padding: 15px; 
  text-align: left; 
  overflow: hidden;
  display: flex; /* 启用Flex布局 */
  align-items: center; /* 让子元素垂直居中 */
}

对应的HTML可以简化（去掉没用的margin-top，用margin-left代替 更规范）：

<div class="topnav">
  <img src="HICOM LOGO.png" style="width:150px;height:100px; margin-left: 30px;">
  <label style="font-size: 40px; margin-left: 20px;">Cost Optimisation System</label>
</div>

2. 给图片设置vertical-align: middle #

如果不想改动容器布局，直接给img添加vertical-align: middle属性，就能让它和label以中线对齐：

<div class="topnav">
  <img src="HICOM LOGO.png" style="width:150px;height:100px; margin-left: 30px; vertical-align: middle;">
  &nbsp; &nbsp;
  <label style="font-size: 40px;">Cost Optimisation System</label>
</div>

记得删掉label里的margin-top，不然反而会让位置更乱。

3. 统一设置为块级元素并对齐 #

把img和label都设为inline-block，再配合vertical-align: middle也能实现效果，不过这种方式不如Flex灵活：

<div class="topnav">
  <img src="HICOM LOGO.png" style="width:150px;height:100px; margin-left: 30px; display: inline-block; vertical-align: middle;">
  &nbsp; &nbsp;
  <label style="font-size: 40px; display: inline-block; vertical-align: middle;">Cost Optimisation System</label>
</div>

个人强烈推荐第一种Flex方案，它不仅解决当前对齐问题，还能让导航栏布局更健壮，后续加按钮、链接之类的元素都能轻松调整位置~

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