0

我有一个 jquery 幻灯片,在纵向和横向位置都有两种不同的图像尺寸。我设法将它们水平居中,但无法让它们垂直居中。

我尝试在 #slideshow { 中使用垂直对齐,但它没有用。我尝试指定一个“顶部”像素位置以使横向图像居中,但纵向图像未居中。有人可以帮忙吗?我已经包含了下面的代码。谢谢!

    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>

    <style type="text/css">

    #slideshow {
    position:relative;
    height:600px;
    width: 800px;
    margin: 0 auto;
    }

    #slideshow DIV {
    position:absolute;
    top:0;
    left:0;
    z-index:15;
    opacity:0.0;
    height: 600px;
    background-color: #FFF;
    min-width: 100%;
    filter: alpha(opacity=0);
    cursor: pointer;
    width: 800px;
    }

    #slideshow DIV.active {
    z-index:17;
    opacity:1.0;
    filter: alpha(opacity=100);
    }

    #slideshow DIV.last-active {
    z-index:16;
    }

    #slideshow DIV IMG {
    display: block;
    border: 0;
    margin: auto;
    max-height: 550px;
    min-width: 350px;
    max-width: 800px;
    center= vertical: true, horizontal: true;
    }

    #Main_Nav {
    font-family: "Univers LT Std 55";
    font-size: 24px;
    font-weight: normal;
    color: #333;
    text-decoration: none;
    background-color: #FFF;
    text-align: left;
    cursor: crosshair;
    padding: 35px 030px;
    }
    #Menu {
    font-family: "Univers LT Std 55";
    font-size: 18px;
    color: #333;
    background-color: #FFF;
    text-align: right;
    }
    #Header {
    font-family: "Univers LT Std 45 Light", Arial, sans-serif;
    background-color: #FFF;
    text-align: center;
    font-size: 36px;
    font-weight: lighter;
    padding-top: 20px;
    min-width: 100%;
    padding-bottom: 40px;
    }
    #Footer {
    font-family: "Univers LT Std 45 Light", Arial, sans-serif;
    font-size: 16px;
    font-weight: lighter;
    color: #333;
    text-align: center;
    padding-top: 10px;
    }
    </style>

    </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"><a style="color:#333; text-decoration:none; font-size: 28px;" href="http://csutorasliando.com/">Csutoras + Liando</a></div>
    </div>

    <div id="slideshow">
    <div class="active"> 
    <img src="../Images/Final/Web/CL_Puri_2_CL.jpg" alt="Slideshow Image 1" width="600"     height="420" align="absmiddle" onclick="clearInterval(intervalID); slideSwitch(); intervalID = setInterval( &quot;slideSwitch()&quot;, 5000)"; top="100" /></p>
    <p>Puri House (expected completion 2012), Indonesia </p>
  </div>

    <div>
    <img src="../Images/Final/Web/CL_Warsaw-Embassy_1_Richters.jpg" alt="Slideshow Image 2" width="735" height="365" onClick="clearInterval(intervalID); slideSwitch(); intervalID = setInterval( &quot;slideSwitch()&quot;, 5000)" />
        </p>
      <p>Warsaw Embassy 2009, Poland </p>
  </div>

    <div>
    <img src="../Images/Final/Web/CL_Warsaw-Embassy_2_Cook.jpg" alt="Slideshow Image 3" width="600" height="420" onClick="clearInterval(intervalID); slideSwitch(); intervalID = setInterval( &quot;slideSwitch()&quot;, 5000)" />
        </p>
      <p>Warsaw Embassy 2009, Poland </p>
  </div>

    <div>
    <img src="../Images/Final/Web/CL_Natsis_1_TFA.jpg" alt="Slideshow Image 4" width="600" height="420" onClick="clearInterval(intervalID); slideSwitch(); intervalID = setInterval( &quot;slideSwitch()&quot;, 5000)" />
        </p>
      <p>Natsis House 2011, Greece </p> 
  </div>

    <div>
    <img src="../Images/Final/Web/CL_Turban_2_CL.jpg" alt="Slideshow Image 5" width="600" height="420" onClick="clearInterval(intervalID); slideSwitch(); intervalID = setInterval( &quot;slideSwitch()&quot;, 5000)" />
        </p>
      <p>Turban utca 2007, Hungary </p> 
  </div>  

    <div>
    <img src="../Images/Final/Web/CL_Broadway_4_Nolan.jpg" alt="Slideshow Image 6" width="600" height="420" onClick="clearInterval(intervalID); slideSwitch(); intervalID = setInterval( &quot;slideSwitch()&quot;, 5000)" />
        </p>
      <p>Broadway School 2011, United Kingdom </p>
  </div>

    <div>
    <img src="../Images/Final/Web/CL_Broadway_1_Nolan.jpg" alt="Slideshow Image 7" width="600" height="420" onClick="clearInterval(intervalID); slideSwitch(); intervalID = setInterval( &quot;slideSwitch()&quot;, 5000)" />
        </p>
      <p>Broadway School 2011, United Kingdom </p>
  </div>

    <div>
    <img src="../Images/Final/Web/CL_Blaak_6_CL.jpg" alt="Slideshow Image 8" width="600" height="420" onClick="clearInterval(intervalID); slideSwitch(); intervalID = setInterval( &quot;slideSwitch()&quot;, 5000)" />
        </p>
      <p>Blaak Apartments 2005, the Netherlands </p>
  </div>

    <div>
    <img src="../Images/Final/Web/CL_Brentwood_3_Riddle.jpg" alt="Slideshow Image 9" width="420" height="550" onClick="clearInterval(intervalID); slideSwitch(); intervalID = setInterval( &quot;slideSwitch()&quot;, 5000)" />
        </p>
      <p>Brentwood School 2011, United Kingdom </p>
  </div>

    <div>
    <img src="../Images/Final/Web/CL_Brentwood_4_Riddle.jpg" alt="Slideshow Image 10" width="600" height="550" onClick="clearInterval(intervalID); slideSwitch(); intervalID = setInterval( &quot;slideSwitch()&quot;, 5000)" />
        </p>
      <p>Brentwood School 2011, United Kingdom </p>
  </div>

    <div>
    <img src="../Images/Final/Web/CL_Puri_7_CL.jpg" alt="Slideshow Image 11" width="600" height="420" onClick="clearInterval(intervalID); slideSwitch(); intervalID = setInterval( &quot;slideSwitch()&quot;, 5000)" />
        </p>
      <p>Puri House (expected completion 2012), Indonesia </p>
  </div>

    <div>
    <img src="../Images/Final/Web/CL_Furn_1_LC.jpg" alt="Slideshow Image 12" width="420" height="550" onClick="clearInterval(intervalID); slideSwitch(); intervalID = setInterval( &quot;slideSwitch()&quot;, 5000)" />
        </p>
      <p>Movable furniture 2011, United Kingdom </p>
  </div>

     <div>
    <img src="../Images/Final/Web/CL_Erste_1_TFA.jpg" alt="Slideshow Image 13" width="600" height="420" onClick="clearInterval(intervalID); slideSwitch(); intervalID = setInterval( &quot;slideSwitch()&quot;, 5000)" />
        </p>
      <p>Erste Bank 2008, Austria </p>
  </div>

    <div>
    <img src="../Images/Final/Web/CL_Solid-11_2_TFA.jpg" alt="Slideshow Image 14" width="600" height="420" onClick="clearInterval(intervalID); slideSwitch(); intervalID = setInterval( &quot;slideSwitch()&quot;, 5000)" />
        </p>
      <p>Solid 11 mixed used complex 2011, the Netherlands </p>
  </div> 

    <div>
    <img src="../Images/Final/Web/CL_Phillimore_1_TFA.jpg" alt="Slideshow Image 15" width="420" height="550" onClick="clearInterval(intervalID); slideSwitch(); intervalID = setInterval( &quot;slideSwitch()&quot;, 5000)" />
        </p>
    <p>Phillimore Garden Residence 2011, United Kindom </p>
  </div>

    <div>
    <img src="../Images/Final/Web/CL_Silver-Rain_1_ML.jpg" alt="Slideshow Image 16" width="420" height="550" onClick="clearInterval(intervalID); slideSwitch(); intervalID = setInterval( &quot;slideSwitch()&quot;, 5000)" />
        </p>
      <p>Summer Pavillion 2005, Estonia </p>
  </div>

    <div>
    <img src="../Images/Final/Web/CL_Furn-4_ML.jpg" alt="Slideshow Image 14" width="600" height="420" onClick="clearInterval(intervalID); slideSwitch(); intervalID = setInterval( &quot;slideSwitch()&quot;, 5000)" />
        </p>
      <p>Kingscross Library desk 2004, Australia </p>
  </div>
4

1 回答 1

0

我过去用来让 div 在另一个 div 内垂直和水平居中的一个技巧是执行以下操作:

我只是在脑海中写下,所以我不能粘贴我的原始代码,但也许这会有用。

<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">
<img src="folder/myImage.jpg" />
</div>
</div>
</div>
于 2013-04-02T22:56:46.090 回答