1

スライダーの次の矢印と前の矢印に問題があります。スライダーは、ウィンドウに合わせて縮小および拡大するように構築されています。Safari を除くすべてのブラウザーですべてが見栄えがします。ボタンはスライダーの中央ではなく上部にあります。

これを修正するために考えられるすべてのことを試しました。何か案は？

ここにサイトがありますhttp://upperdeck.dev.warp9inc.com

ボタンのコードはこちら。

.slideshow-wrapper .backward {
    position:absolute;
    left: 10px;
    margin-top:10%;
    background:url(../../images/infortis/super-slideshow/slideshow-arrows.png) 0 0 no-repeat;
    width:50px;
    height:50px;
}

.slideshow-wrapper .forward {
    position:absolute;
    right:10px;
    margin-top:10%;
    background:url(../../images/infortis/super-slideshow/slideshow-arrows.png) -50px 0 no-repeat;
    width:50px;
    height:50px;
}

ありがとう！

4

1 に答える 1

1

絶対配置された要素の場合、このように中央に配置できます

top: 50%;
margin-top: -25px

これは、絶対に配置されたアイテムを水平方向にセンタリングする場合にも機能し、親が動的にサイズを変更した場合でも機能します。

top および/または left を 50% に設定してから、margin-top/margin-left を、中央に配置しようとしているアイテムの幅の負の 1/2 に設定します。したがって、CSS は次のようになります。

/* Make sure .slideshow-wrapper has position: relative; */  
.slideshow-wrapper .backward {
        position:absolute;
        left: 10px;
        top: 50%;
        margin-top: -25px;
        background:url(../../images/infortis/super-slideshow/slideshow-arrows.png) 0 0 no-repeat;
        width:50px;
        height:50px;
    }

    .slideshow-wrapper .forward {
        position:absolute;
        right:10px;
        top: 50%;
        margin-top: -25px;
        background:url(../../images/infortis/super-slideshow/slideshow-arrows.png) -50px 0 no-repeat;
        width:50px;
        height:50px;
    }

これは、親の 50% に絶対に配置されるように div を指示することですが、要素の中央ではなく上端または左端を使用するため、完全には中央に配置されません。したがって、要素の中央が親の 50% になるように、要素の幅または高さの半分だけ左または上に位置をオフセットする必要があります。

于 2013-05-03T19:45:00.960 に答える