圖像拒絕居中

圖像拒絕居中在html代碼中。寬度是自動的，必須是。我正在嘗試使用邊距將圖像居中：自動居中。畫廊應該比視口寬。 CSS和Javascript：圖像拒絕居中

#gallery{ 
     position:fixed; 
     top:0px; 
     left:50%; 
     width:6000px; 
     height:100%; 
     margin-left:-3000px; 
     background-image:url('images/bluey.jpg'); 
     background-position:center center; 
     background-repeat:no-repeat; 
     background-color:red; 
    } 
    .galimag{ 
     opacity:0.5; 
     position:absolute; 
     margin-left:auto; 
     margin-right:auto; 
     width:auto; 
     height:80.3%; 
     top:10.2%; 
    } 

</style> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    var T = setInterval(function(){ 
     $('img.galimag').css('width','auto'); 
     $('img.galimag').each(function(){ 
      var w = $(this).width(); 
      $(this).width(w); 
     }); 
    },100); 
</script>

的Html這裏：

<body> 
     <div id="gallery"> 
      <img class="galimag" src="/images/grid.jpg" alt="img"/> 
       <img class="galimag" src="/images/referrals.2.jpg" alt="img"/> 
     <img class="galimag" src="/images/referrals.3.jpg" alt="img"/> 
     <img class="galimag" src="/images/referrals.4.jpg" alt="img"/> 
     <img class="galimag" src="/images/referrals.5.jpg" alt="img"/> 
     </div> 
     <div id="controls"></div> 
     <div id="ipad-controls"></div> 
    </body>

如何強迫他們中心？

來源

2012-03-26 John Tippin

您不能在絕對定位的元素上使用邊距。重寫你的Javascript，根據圖像和包裝的寬度（即[圖像包裝寬度的寬度]/2）來計算正確的'left'位置。 – justis 2012-03-26 19:54:47

你的javascript沒有任何意義，內部函數什麼都不做，你將每隔100毫秒重新設置一次寬度。爲什麼？ – 2012-03-26 20:11:45

你用你的間隔函數試圖達到什麼目的？

設置#gallery到text-align:center;

和絕對位置出來的圖像。

來源

2012-03-26 19:55:51

使用下面的center標籤或將text-align: center;設置爲父容器將執行此操作。

我還強烈建議您刪除您的javascript，因爲它實際上什麼都不做，只是發送錯誤的控制檯而發送垃圾郵件。

<body> 
     <div id="gallery"> 

<center> 

      <img class="galimag" src="/images/grid.jpg" alt="img"/> 
       <img class="galimag" src="/images/referrals.2.jpg" alt="img"/> 
     <img class="galimag" src="/images/referrals.3.jpg" alt="img"/> 
     <img class="galimag" src="/images/referrals.4.jpg" alt="img"/> 
     <img class="galimag" src="/images/referrals.5.jpg" alt="img"/> 

<center> 

     </div> 


     <div id="controls"></div> 
     <div id="ipad-controls"></div> 
    </body>

來源

2012-03-26 20:18:21

圖像拒絕居中

回答

相關問題