如何在放大CSS HTML时阻止DIV粘在页面左侧

How to stop DIV from sticking to left of page when zoom in CSS HTML

本文关键字：DIV 放大 CSS HTML      更新时间：2023-09-26

场景

我在我的网站上有一个宽度为2000px的横幅，当我放大整个横幅时，它会粘在页面的左侧。

问题

我希望它保持原样，如果用户放大太多，它就会离开页面。与此网站横幅相同的方式

示例

我在横幅中有一个图像，它是2000px，图像的主要部分在中心，宽度为1000px。如果放大，图像会移动，图像的中心会向右移动。

这是我的实时代码：站点示例

这是我的CSS：

    #slideshow { 
    margin: 0 auto; 
    position: relative; 
    left:0px;
    width: 2000px; 
    height: 400px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
    display:block;
    text-align:center;
    float: none;
}
#slideshow img {
   margin: 0 auto;
   text-align:center; 
}
#slideshow > div { 
    position: absolute; 
}
#banner {
    background: #EAEAEA;
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    width: 100%;
    position: absolute;
    left: 0px;
    overflow-x: hidden;
    top: 180px;
}

这是我的HTML:

 <div id="banner">
    <div id="slideshow">
      <div><a href="#"><img src="AG/images/bulbs.png"></a></div>
      <div><img src="AG/images/cables.png"></div>
   </div>
</div>

我还在学习，所以我感谢你的帮助：D

使位置相对，并在要移动横幅的方向上添加一些填充。

相关文章：