5

jQuery Cycle プラグインを使用して、スライドショー形式で画像を回転させています。それはうまくいきます。私が抱えている問題は、これらの画像 (サイズが異なる) を含む div の中央に配置することです。画像は、Cycle プラグインによって絶対位置に設定されたスライドショー div 内にあります。

line-height/vertical-align などを設定しようとしましたが、サイコロはありません。関連する HTML と CSS は次のとおりです。

HTML:

<div id="projects">
  <div class="gallery">
     <span class="span1">&#9668;</span><span class="span2">&#9658;</span>
        <div class="slideshow">
          <img src="images/img1.png"  />
          <img src="images/img1.png"  />
          <img src="images/img1.png"  />
        </div>
  </div>
</div>

CSS:

#main #home-column-2 #projects
{
  width: 330px;
  background: #fefff5;
  height: 405px;
  padding: 12px;
}

#main #home-column-2 #projects .gallery
{
  width: 328px;
  height: 363px;
  position: relative;
  background: url('images/bg-home-gallery.jpg');
}

#main #home-column-2 #projects .gallery img
{
  position: relative;
  z-index: 10;
}

そして、あなたがそれを見たい場合は、jQuery:

$('#home-column-2 #projects .gallery .slideshow').cycle(
{
   fx: 'scrollHorz',
   timeout: 0,
   next: "#home-column-2 #projects .gallery span.span2",
   prev: "#home-column-2 #projects .gallery span.span1"
});

これらの画像を中央に配置するためのアイデアはありますか?

4

4 に答える 4

1

この方法には少しjqueryが含まれますが、ほとんどの状況でうまく機能します...説明させてください：

スライドショーのすべての画像が独自の要素 div pos:absolute 内に含まれ、それらの画像が pos:relative である場合、$(window).load() で .each() を実行して、スライドショーを開き、上部から特定のピクセル数だけオフセットされるように上部の位置を調整します..

jcycle は、画像を含む各親 div をすべての onafter() で自動的に pos:absolute に設定するため、この pos 調整をそれらに適用しても意味がありません...代わりに、pos:relative に設定した各 img をターゲットにします...

次に例を示します。

$(window).load(function() {

  // move all slides to the middle of the slideshow stage
  var slideshowHeight = 600; //this can dynamic or hard-coded

  $('.slideImg').each(function(index) {

    var thisHeight = $(this).innerHeight();
    var vertAdj = ((slideshowHeight - thisHeight) / 2);
    $(this).css('top', vertAdj);

  });

});

そして、これはそれが取り組んでいるhtmlです...

<div class="slideshow" style="position: relative; ">

   <div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img0">
       <img class="slideImg" src="/images/picture-1.jpg" style="top: 0px; "><!-- the style=top:0 is a result of the jquery -->
   </div>


   <div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img1">
       <img class="slideImg" src="/images/picture-1.jpg" style="top: 89.5px; "><!-- the style=top:89.5px is a result of the jquery -->
   </div>


   <div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img2">
       <img class="slideImg" src="/images/picture-1.jpg" style="top: 13px; "><!-- the style=top:13px is a result of the jquery -->
   </div>


</div>

確認してください

.slideImg {
    position:relative;
}

それがすべてだと思います...例がありますが、開発サイトにあります..このリンクは長続きしないかもしれません..しかし、ここで見ることができます： http://beta.gluemgmt.com/portfolio/ rae-scarton-editorial.html

于 2012-07-06T21:46:20.500 に答える
1

これを試して：

http://www.brunildo.org/test/img_center.html

縦のセンタリングが面倒！垂直方向の中心について、W3C ページには次のように記載されています。

CSS レベル 2 には、垂直方向に中央揃えするためのプロパティがありません。CSS レベル 3 にはおそらく 1 つあるでしょう。ただし、CSS2 でも、いくつかのプロパティを組み合わせることで、ブロックを垂直方向に中央揃えにすることができます。表のセルの内容を垂直方向に中央に配置できるため、外側のブロックを表のセルとしてフォーマットするように指定するのがコツです。

于 2009-11-02T18:40:48.343 に答える
0

各サイクル アイテム内に 2 つの div をネストする必要があります。1 つ目は次のように表示する必要があります: inline-table; 2 番目には、display: table-cell; が必要です。これらの div には両方とも vertical-align: middle があります。

したがって、構造は次のようになります。

<div class="slide-container">
    <div class="slide">
        <div class="outer-container">
            <div class="inner-container">
                Centered content
             </div>
        </div>
    </div>

    <div class="slide">
        <div class="outer-container">
            <div class="inner-container">
                Centered content
             </div>
        </div>
    </div>
 </div>

次のCSSを使用：

.slide-container {
    height: 300px;
}
.outer-container {
    height: 300px;
    display: inline-table;
    vertical-align: middle;
}
.inner-container{
    vertical-align: middle;
    display: table-cell;
}

ここで動作していることがわかりますhttp://jsfiddle.net/alsweeet/H9ZSf/6/

于 2013-04-30T17:55:29.193 に答える
0

位置はスタイルシートによると相対的なので、 と に設定してみましたdisplay: blockかmargin-top: auto; margin-bottom: auto;?

別のオプションは、含まれている div の高さに基づいて JavaScript で手動で整列することです。

于 2009-11-02T05:44:09.283 に答える