CSS中央揃えスライドショーイメージ

Question

すべての画面サイズ/解像度の中心になるようにスライドショーイメージを水平に配置する際に問題が発生しています。

HTMLはこれが一致するように

<div id='banner'> 
    <div class='slides_container'> 
     <div> 
      <a href='#'><img src='images/banner.png'></a> 
     </div> 
     <div> 
      <a href='#'><img src='images/banner2.png'></a> 
     </div> 
    </div> 
</div> 

とCSSようになります。私は本当に以来、すべての画面サイズに中央に画像を取得するために、ここで苦労しています

#banner { 
    width:100%; 
    margin-bottom:50px; 
} 

.slides_container { 
    width:100%; 
    height:500px; 
} 

.slides_container div { 
    width:1100px; 
    height:500px; 
    text-align:center; 
} 

パディングとマージン私は別の方法が必要です！

すべての返信は非常に高く評価されています。

Answer 1

あなたは.slides_container divがその親の中央に配置されていることを確認する必要がありますが、追加すなわち

.slides_container div { 
    margin: 0px auto; // center 
    width:1100px; 
    height:500px; 
    text-align:center; 
} 

問題が解決しない場合は、必ず親コンテナを作成する必要がありますページの幅100％です。

親がページの100％幅れていない場合は、親もこの性質を持っている必要があります：

.slides_container { 
    margin: 0px auto; 
} 

問題が解決しない場合、その後、あなたは親が100％であることを確認する必要がありますページの幅。

これが役に立ちます。

編集

私は放火魔でそれを見ていたし、スライドコンテナが3800pxワイドに設定されている、とのdivの内側には幅が設定されていないことがすぐに明らかになりました。スライドコンテナ内のdivを100％幅に設定すると、幅が3800pxになるため、動作しません。

使用しているスクリプトの性質上、abolute-positioned divを使用しています。したがってmargin: 0px autoはここでは機能しません。

解決策は、onloadを実行するjavascriptのビットです。ウィンドウのサイズ変更では、画像をブラウザウィンドウの幅に保持するdivとtext-align：centerを設定します。私が1280pxワイドモニターを持っているので、したがって、たとえば、これは私のために画像を中央に配置：

.slides_control div { 
    width: 1280px; 
    text-align: center; 
} 

Answer 2

通常、これを処理するにはmargin:0 auto;を使用します。 text-alignはdivには適していません。

Answer 3

.slides_container imgとmargin:0 auto

#banner { width:100%; margin-bottom:50px; } 

.slides_container { 
    width:100%; 
    height:500px; 
} 

.slides_container div, .slides_container img { 
    width:1100px; 
    height:500px; 
    text-align:center; 
    margin:0 auto; }