0

CarouFredSel をカルーセルとして使用しており、このカルーセル内のテキスト コンテンツを本文コンテンツに視覚的に垂直方向に揃えたいと考えています。leftブラウザーの幅に基づいて #carouselのプロパティを調整することで、javascript (コメントアウトしました) でこれを実行できることはわかっていますが、CSS ソリューションを探しています。

私の問題を説明するスクリーンショット 左の青いスクリーンショットは、ブラウザーが最大化されたときに Web サイトを表示しており、カルーセルの「link3」が「コンテンツ」に合わせて表示されているように見えます。右側の赤いスクリーンショットは、ブラウザーが最小化されたときに Web サイトを表示しており、「link1」は視覚的に「コンテンツ」と整列していません。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<link rel="stylesheet" type="text/css" media="all" href="reset.css">
<script type="text/javascript" language="javascript" src="<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>"></script>
<script type="text/javascript" language="javascript" src="http://www.sfu.ca/~jca41/stuph/jquery.carouFredSel.js"></script>

<script type="text/javascript" language="javascript">

$(function() {
$('#carousel').carouFredSel({
    items: 1,
    scroll: {
        fx: 'crossfade',
        duration: 1000
    },
    pagination: {
        container: '#pager',
        duration: 500
    }
});

/*$(window).resize(function() {
    var winW = $(window).width();
    var carouselWidth = $('#carousel .slide').css('width');
    carouselWidth = carouselWidth.replace(/[^0-9]/g, '');

    if (winW > carouselWidth) {
        $('#c-carousel').css('left', (winW-carouselWidth)/2 + 'px'); 
    } else {
        $('#c-carousel').css('left', '0px'); 
    }
}).resize();*/

});


</script>
<style type="text/css" media="all">


#heroicCarousel {
    height: 100%;
    padding: 0;
    margin: 0 auto;
    min-height: 250px;
    position: relative;
    z-index: 1000;
    text-align:center;
    max-width:600px;
}
.caroufredsel_wrapper {
    width: 100% !important;
    height: 100% !important;
}
#carousel {
    position: absolute !important;
}
#carousel .slide {
    width:600px;
    height:250px;
    overflow: hidden;
    float: left;
}
#carousel .slide .content {
    font-size: 55pt;
    position: relative;
    top: -100px;
    left: 150px;
    z-index: 5;
}
#carousel .slide img {
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
}

#pager {
    position: relative;
    top: -700px;
    left: 0;
    z-index: 10;
    display: block;
    text-align: center;
}
#pager a {
    background-color: #356;
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 6px;
    border-radius: 10px;
    box-shadow: 0 1px 1px #cef;
}
#pager a.selected {
    background-color: #134;
}
#pager a span {
    display: none;
}

#content {
    background: yellow;
    width: 300px;
    height: 300px;
    position: relative;
    margin: 0 auto;
    z-index: 20px;
    top: -520px;
    font-size: 60pt;
}

</style>
</head>
<body>
<div id="heroicCarousel">
    <div class="caroufredsel_wrapper">
        <div id="carousel">
            <div class="slide">
                <img src="http://www.placehold.it/600x250/ff0000/999999">
                <div class="content"><a href="">link1</a></div>
            </div>
            <div class="slide">
                <img src="http://www.placehold.it/600x250/00ff00/999999">
                <div class="content"><a href="">link2</a></div>
            </div>
            <div class="slide">
                <img src="http://www.placehold.it/600x250/0000ff/999999">
                <div class="content"><a href="">link3</a></div>
            </div>
            <div class="slide">
                <img src="http://www.placehold.it/600x250/f0f0ff/999999">
                <div class="content"><a href="">link4</a></div>
            </div>
        </div>
    </div>
    <div id="pager">
        <a href="http://coolcarousels.frebsite.nl/c/18/#" class="selected"><span>1</span></a>
        <a href="http://coolcarousels.frebsite.nl/c/18/#" class=""><span>2</span></a>
        <a href="http://coolcarousels.frebsite.nl/c/18/#" class=""><span>3</span></a>
        <a href="http://coolcarousels.frebsite.nl/c/18/#" class=""><span>4</span></a>
    </div>
</div>
<div id="content">
    content
</div>

</body>
</html>
4

1 に答える 1

0

私は通常、div を囲む要素を使用してそれを行います。この elem は、最も広い div と同じ幅であり、 を持つすべての子margin:0 auto;はその中央に配置されます。例http://jsfiddle.net/5LJhC/1/

非常に単純な例ですが、カルーセルの幅が変化するとコンテンツ div が中央に配置される様子を示しています

于 2012-09-21T19:33:23.027 に答える