Question

我想在屏幕上全屏显示图像。截至目前，每当我将屏幕宽度设置得更小时，中心图像就会移动，这会影响整个页面，因为我根据其起始位置定位了周围的其他周围图像。当浏览器变小时，如何让中心图像保持原位。

//这是中心图像

     <div class="container">
        <div class="row">
            <div class="span4"></div>
            <div class="span4">         
                <div class="Button_FSG_Logo"></div>
            </div>
            <div class="span4"></div>
        </div>
     </div>

//这是围绕它的图像

       <div class="button">
            <div class="button grow btnTech">
                <div class="tech border"></div>
            </div>
       </div>
       <div class="button">
         <div class="button grow btnFin">
            <div class="fin border"></div>
         </div>
       </div>

//这是将按钮位置相对于中心图像定位的jQuery

  var position = $(".Button_FSG_Logo");
  var offset = position.offset();
  $(".btnTech").offset({ top: offset.top + 2, left: offset.left - 384 });
  $(".btnFin").offset({ top: offset.top + 126, left: offset.left - 384 });

// CSS

 .Button_FSG_Logo{
   margin: auto;
   margin-top: 270px;
 }

所有其他按钮（图像）都有位置：绝对;我正在使用bootstrap 3.我正在寻找一个可能使引导程序无响应的答案，我认为可能导致中心图像移动一旦浏览器变小虽然我尝试了一些东西而且它不起作用。或者我可以设置一个设定的宽度，然后将其放在该宽度内。

仅在全屏时居中图像

0 个答案: