如何设置Padding以匹配Banner高度并解决Logo居中与锚点点击区域问题

我明白你的困扰——想扩大<a>标签的可点击区域，但加了padding后Banner被撑高，Logo没法保持居中。咱们一步步来解决这个问题：

问题根源分析 #

你现在是给#logout、#cart这些嵌套在<a>里的div加padding，这会让这些div的高度增加，进而撑开整个Banner的高度。同时Logo的居中方式（margin-left:50%）没有考虑到Banner高度变化后的垂直居中，所以就出现了错位。另外，没必要用div嵌套<a>，直接让<a>作为可点击容器会更简洁。

解决方案 #

我们可以通过以下几个调整来实现需求：

• 直接给<a>标签加padding：把padding从内部div移到<a>标签上，这样既扩大了点击区域，又能更好地控制布局
• 利用Flex布局实现垂直居中：给Banner设置align-items: center，这样不管内部元素高度怎么变，所有子元素都会自动垂直居中
• 优化Logo的水平居中：用Flex的margin: auto或者调整justify-content来让Logo水平居中，比margin-left:50%更可靠
• 简化HTML结构：去掉不必要的div嵌套，让代码更简洁

修改后的完整代码 #

CSS代码

body { 
  margin: 0; 
  background-image: url("../img/background.png"); 
  background-repeat: repeat; 
}

#window { /* 注意你原来的id是window不是windows，要统一 */
  width: auto; 
  height: auto;
}

#banner { 
  width: 100%; 
  background-image: url("../img/banner-background.png"); 
  display: flex;
  align-items: center; /* 关键：让所有子元素垂直居中 */
  padding: 10px 0; /* 可以给Banner加上下内边距，控制整体高度，避免被内容过度撑开 */
}

#logo { 
  height: 50px; 
  width: 50px; 
  margin-left: auto;
  margin-right: auto; /* 让Logo在剩余空间里水平居中 */
}

#logoutandcart { 
  margin-right: 30px; 
  display: flex; /* 让Logout和Cart横向排列 */
  gap: 5px; /* 替代margin-right来控制两个按钮的间距 */
}

/* 直接给a标签设置样式，扩大点击区域 */
.conteiner {
  padding: 20px 5px; /* 上下20px，左右5px的内边距，扩大点击区域 */
  width: fit-content;
  text-decoration: none; /* 可选：去掉链接下划线 */
  color: inherit; /* 继承父元素颜色 */
}

HTML代码

<div id="window">
  <div id="banner">
    <div id="logo">
      <a class="forwarder" href="home.php">
        <img src="../img/nftlogo.png" alt="banner logo">
      </a>
    </div>
    <div id="logoutandcart">
      <a class="conteiner" href="./login.php">Log out</a>
      <a class="conteiner" href="./cart.php">Carrello</a>
    </div>
  </div>
</div>

关键调整说明 #

• #banner添加align-items: center：这是让Logo和右侧按钮保持垂直居中的核心，不管内部元素的高度怎么变化，都会自动对齐到Banner的垂直中线
• 把padding移到.conteiner（a标签）上：直接给链接设置padding，既扩大了可点击区域，又不会因为嵌套div导致布局混乱
• #logoutandcart用flex布局+gap：替代原来的float和margin，更简洁地控制两个按钮的横向排列和间距
• Logo的水平居中：用margin-left: auto; margin-right: auto让Logo在Banner的剩余空间里自动居中，比固定的margin-left:50%更适配不同屏幕宽度

这样调整后，你既得到了扩大的可点击区域，又能保证所有元素在Banner里完美居中，Banner的高度也能保持稳定~

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