窗口缩放时Banner与Navbar无法居中的技术问题求助

我瞅了你的代码，问题其实出在.box的定位设置上——你用了left:25%来强行定位，再加上固定的min-width，窗口缩小的时候就会出现左边留空、整体偏右的情况。咱们换个标准的居中方式就能解决：

核心问题拆解 #

你给.box设置了width:52% + left:25%，这在窗口足够大的时候没问题，但当窗口宽度小于999px / 0.52 ≈ 1921px时，.box会被min-width:999px固定住宽度，可左边的25%边距还在，右边就被窗口边缘挤没了，自然就偏右了。

修改方案 #

把.box的定位逻辑换成自动水平居中，同时调整导航栏的定位避免冲突，具体代码如下：

修改后的CSS

body, html { 
  margin: 0px; 
  padding: 0px; 
}

div.box { 
  position: relative; 
  margin: 0 auto; /* 关键：用margin实现水平居中，代替left:25% */
  padding: 0; 
  height: auto; 
  width: 52%; 
  min-width: 999px; 
  background-color: #555555; 
  z-index: -1; 
}

ul.parent { 
  margin: 0; 
  padding: 0; 
  border: 0; 
  list-style-type: none; 
}

div.image1 { 
  /* 去掉float:left，避免和居中布局冲突 */
  height: auto; 
}

img.imageHome { 
  width: 100%; 
  height: auto; 
  position: relative; 
}

div.navi { 
  list-style-type: none; 
  position: relative; /* 把absolute改成relative，避免脱离文档流 */
  display: flex; 
  /* 去掉float:left，flex布局本身就能横向排列 */
}

/* 补充下拉菜单基础样式（原代码可能遗漏，确保功能正常） */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

对应的HTML结构（基本不变，确保嵌套合理）

<div class="box">
  <body>
    <ul class="parent">
      <li>
        <div><img src="Images/banner2.png" class="image1"></div>
      </li>
      <li>
        <div class="navi">
          <a href="Home.php"><img src="Images/home.png" onMouseOver="this.src='Images/home2.png'" onMouseOut="this.src='Images/home.png'" class="imageHome"></a>
          <div class="dropdown">
            <img src="Images/webtoons.png" onMouseOver="this.src='Images/webtoons2.png'" onMouseOut="this.src='Images/webtoons.png'" class="imageHome">
            <div class="dropdown-content">
              <a href="yaoi.php"><img src="Images/yaoibl.png" onMouseOver="this.src='Images/yaoibl2.png'" onMouseOut="this.src='Images/yaoibl.png'" class="imageHome"></a>
              <a href="fanfic.php"><img src="Images/nonbl.png" onMouseOver="this.src='Images/nonbl2.png'" onMouseOut="this.src='Images/nonbl.png'" class="imageHome"></a>
            </div>
          </div>
          <div class="dropdown">
            <img src="Images/media.png" onMouseOver="this.src='Images/media2.png'" onMouseOut="this.src='Images/media.png'" class="imageHome">
            <div class="dropdown-content">
              <a href="blcd.php"><img src="Images/blcd.png" onMouseOver="this.src='Images/blcd2.png'" onMouseOut="this.src='Images/blcd.png'" class="imageHome"></a>
              <a href="Yaoi.php"><img src="Images/pictures.png" onMouseOver="this.src='Images/pictures2.png'" onMouseOut="this.src='Images/pictures.png'" class="imageHome"></a>
              <a href="Yaoi.php"><img src="Images/videos.png" onMouseOver="this.src='Images/videos2.png'" onMouseOut="this.src='Images/videos.png'" class="imageHome"></a>
            </div>
          </div>
          <div class="dropdown">
            <img src="Images/scanlation.png" onMouseOver="this.src='Images/scanlation2.png'" onMouseOut="this.src='Images/scanlation.png'" class="imageHome">
            <div class="dropdown-content">
              <a href="yaoi.php"><img src="Images/scanlationteam.png" onMouseOver="this.src='Images/scanlationteam2.png'" onMouseOut="this.src='Images/scanlationteam.png'" class="imageHome"></a>
              <a href="fanfic.php"><img src="Images/cbaw.png" onMouseOver="this.src='Images/cbaw2.png'" onMouseOut="this.src='Images/cbaw.png'" class="imageHome"></a>
            </div>
          </div>
          <a href="contact.php"><img src="Images/aboutus.png" onMouseOver="this.src='Images/aboutus2.png'" onMouseOut="this.src='Images/aboutus.png'" class="imageHome"></a>
        </div>
      </li>
    </ul>
  </body>
</div>

为什么这么改？ #

• margin: 0 auto是块级元素水平居中的标准写法，浏览器会自动计算左右边距，窗口缩放时两边会均等收缩，完美解决你的问题。
• 把div.navi的position:absolute改成relative，避免它脱离文档流后破坏.box的居中布局，同时flex布局本身就能实现导航项的横向排列，不需要额外加float:left。
• 去掉div.image1的float:left，防止它把Banner元素带偏，影响整体居中效果。

这样调整后，不管你怎么缩放窗口，Banner和导航栏都会稳稳地保持在屏幕中间，左右边距始终对称~

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