1

スライドショー画像を水平方向に中央揃えにして、すべての画面サイズ/解像度の中央に配置する際に問題が発生します。

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;
}

パディングとマージンが機能しないため、画像をすべての画面サイズの中央に配置するのに本当に苦労しています。別の方法が必要です。

どんな返事でも大歓迎です。

4

3 に答える 3

0

通常、彼らはmargin:0 auto;これを処理するために使用します。text-alignのためにあなたは良くないでしょうdiv。

于 2012-05-08T17:48:11.920 に答える
0

.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% 幅であることを確認する必要があります。

お役に立てれば。

編集

FireBug で調べてみたところ、スライド コンテナが 3800px 幅に設定されており、内部の div には幅が設定されていないことがすぐにわかりました。スライド コンテナ内の div を 100% 幅に設定すると、幅が 3800px になるため、動作しません。

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

解決策は、onload を実行し、ウィンドウのサイズを変更して、画像を保持する div をブラウザー ウィンドウの幅に設定し、text-align: center を設定するための JavaScript です。たとえば、私は幅 1280 ピクセルのモニターを使用しているため、画像を中央に配置します。

.slides_control div {
    width: 1280px;
    text-align: center;
}
于 2012-05-08T21:20:34.700 に答える
0

追加.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; }
于 2012-05-08T17:55:56.160 に答える