网页双图片垂直对齐问题求助：line-height与vertical-align无效

云原生阿岚

2026-7-25

解决两张图标+文字模块的垂直对齐问题

问题分析

你当前的代码里，h2标签默认带有上下外边距，会撑开.logo和.logo2容器，同时没有给父元素nav设置合适的布局规则，仅靠vertical-align: middle无法实现整体的垂直对齐。

修正后的代码

HTML（补全闭合标签即可）

<div class="main">
  <nav>
    <a href="guest_login.php" class="logo">
      <img src="images/guesticon.png">
      <h2 class="name">GUEST</h2>
    </a>

    <a href="officer_login.php" class="logo2">
      <img src="images/policeicon.png">
      <h2 class="name">ADMIN</h2>
    </a>
  </nav>
</div>

CSS（使用Flex布局实现垂直对齐，重置默认样式）

/* 给nav设置flex布局，实现两个模块的垂直对齐 */
nav {
  display: flex;
  align-items: center; /* 垂直方向居中对齐 */
  gap: 20px; /* 两个模块之间的间距，可自行调整 */
}

/* 统一两个logo模块的样式，避免重复代码 */
.logo, .logo2 {
  display: flex;
  flex-direction: column; /* 内部元素垂直排列 */
  align-items: center; /* 内部元素水平居中 */
  text-decoration: none; /* 去掉a标签的下划线 */
}

.logo img, .logo2 img {
  height: 150px;
  width: 150px;
  margin: 10px 20px 0; /* 调整外边距，去掉冗余的margin-top */
  padding: 3px;
}

/* 重置h2的默认外边距，避免撑开容器 */
.name {
  margin: 10px 0 20px;
  color: inherit; /* 继承a标签的颜色，避免链接颜色干扰 */
}