イメージはセンターへのアクセスを拒否します

イメージは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

絶対配置された要素に余白を使用することはできません。イメージの幅とラップ（つまり、[イメージのラップ幅の幅]/2）に基づいて正しい「左」の位置を計算するようにJavaScriptを書き換えます。 – justis

あなたのJavaScriptは何の意味もなく、内部機能は何もしておらず、100ミリ秒ごとにCSSの幅をリセットしています。なぜですか？ –

インターバル機能で何を達成しようとしていますか？

はtext-align:center;

に表示#galleryや画像のうち絶対位置を設定します。

出典

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

イメージはセンターへのアクセスを拒否します

答えて

関連する問題