jquery slideshow nu poate centra imaginile pe verticală

Am o prezentare de jQuery cu două dimensiuni diferite de imagini, atât în ​​portret cât și în peisaj. Am reușit să le centraz pe orizontală, dar nu le-am putut face să se centreze pe verticală.

Am încercat să utilizez alinierea verticală în #slideshow {dar nu a funcționat. Am incercat sa specificam o pozitie de pixel "de sus" pentru a centra imaginile peisajului, dar apoi portretul nu este centrat. Ar putea cineva să vă ajute? Am inclus codurile de mai jos. Mulțumesc!

    function slideSwitch() {
    var $active = $('#slideshow DIV.active');

    if ( $active.length == 0 ) $active = $('#slideshow DIV:last');

   //use this to pull the divs in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow DIV:first');

   //uncomment below to pull the divs randomly
   //var $sibs  = $active.siblings();
   //var rndNum = Math.floor(Math.random() * $sibs.length );
   //var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 300, function() {
            $active.removeClass('active last-active');
        });
    }

    var intervalID = "";
    $(function() {
        intervalID = setInterval( "slideSwitch()", 5000 );

    });

    </script>

    
    </head>

    <body style="font-weight: lighter; font-style: normal; font-family: 'Univers LT Std 45 Light', Arial, sans-serif; text-align: center;">

    <div class="Header" id="Header">Csutoras + Liando</div>
    </div>

    <div id="slideshow">
    <div class="active"> 
    Slideshow Image 1
    
Puri House (expected completion 2012), Indonesia </div> <div> Slideshow Image 2
Warsaw Embassy 2009, Poland </div> <div> Slideshow Image 3
Warsaw Embassy 2009, Poland </div> <div> Slideshow Image 4
Natsis House 2011, Greece </div> <div> Slideshow Image 5
Turban utca 2007, Hungary </div> <div> Slideshow Image 6
Broadway School 2011, United Kingdom </div> <div> Slideshow Image 7
Broadway School 2011, United Kingdom </div> <div> Slideshow Image 8
Blaak Apartments 2005, the Netherlands </div> <div> Slideshow Image 9
Brentwood School 2011, United Kingdom </div> <div> Slideshow Image 10
Brentwood School 2011, United Kingdom </div> <div> Slideshow Image 11
Puri House (expected completion 2012), Indonesia </div> <div> Slideshow Image 12
Movable furniture 2011, United Kingdom </div> <div> Slideshow Image 13
Erste Bank 2008, Austria </div> <div> Slideshow Image 14
Solid 11 mixed used complex 2011, the Netherlands </div> <div> Slideshow Image 15
Phillimore Garden Residence 2011, United Kindom </div> <div> Slideshow Image 16
Summer Pavillion 2005, Estonia </div> <div> Slideshow Image 14
Kingscross Library desk 2004, Australia </div>
0
@UmairP; prima dată folosind jfiddle, astfel încât pot exista unele greșeli, dar aici este linkul jsfiddle.net/NcQhr/8
adăugat autor waikiki, sursa
@Andy; multumesc pentru punerea codului in dreapta .. am luptat putin acolo
adăugat autor waikiki, sursa
@Umair; cumva imaginile nu se afișează atunci când am încercat să redeschid pagina (în Google chrome) .. doar căsuța lor de legare ... în firefox casetele delimitate nu sunt chiar afișate. Cu toate acestea, ele par a fi comutarea/redarea continuu. Dacă cineva poate ajuta ... să fie mult apreciat
adăugat autor waikiki, sursa
Introduceți acest cod în jsFiddle pentru a putea juca cu el. De asemenea, dacă aveți o pagină live, faceți partajarea adresei URL.
adăugat autor Obi-Wan Spock, sursa

1 răspunsuri

Un truc pe care l-am folosit în trecut pentru a obține divs la centru vertical și orizontal în interiorul unui alt div este de a face ceva de genul:

Doar scot partea de sus a capului meu, așa că nu-mi pot lipi codul original, dar poate că asta va fi de folos.

<div style="width:800px; overflow:hidden">
<div style="display:table; margin:0 auto">
<div style="display:table-cell; vertical-align:middle; text-align:center; height:400px">

</div>
</div>
</div>
0
adăugat
adăugat autor Shazboticus S Shazbot, sursa