0

jQueryCycleLiteプラグインを実行している画像を含むdivにロードするスクリプトがあります。

そのプラグインの「after」関数を使用して、画像が更新されるたびに画像に変更を加えることができるというヒントを得ました。だから私はこれを書いた：

$("#display div").css({  
  margin: "0 auto",  
  "text-align": "center",  
});

このように構築されたhtml：

<div id="display">
  <div id="slideshow1">
     <img ... />  
  </div> 
</div>

これは機能していません、何が問題なのですか？
（これは水平方向に中央に配置することになっています。垂直方向に中央に配置する必要があります）。

編集：
私はそれを機能させましたが、それでも助けが必要です、なぜその動作が奇妙なのか知っている人はいますか？ http://hem.bredband.net/noor/bildspelet.html

リンクをありがとう@pekka

4

2 に答える 2

1

まず第一に、JavaScript オブジェクトの末尾のコンマは悪いものです。最後のコンマを削除してください。

第二に、おそらく次のように計算できます。

var $div = $('#display');
$div.css('position', 'relative');

var $kids = $div.children(); 
// I'm assuming you want to center all the slideshows?
$kids.each(function() {
  var $this = $(this);
  $this.css({
    left: ($div.innerWidth(true) - $this.width()) / 2,
    top: ($div.innerHeight(true) - $this.height()) / 2,
    position: 'absolute'
  });
});

サンプルを見ると<div id="display">、css で高さを設定する必要があります (100% であっても)。そうしないと、常に縮小して含まれます (すべての子が絶対配置になると、高さがゼロになります)。jsbinの例を見てください

于 2010-04-22T16:20:52.557 に答える
0

このような場合、CSS ソリューションは常に JS ソリューションよりも望ましいです。なぜなら、a) JavaScript をオフにして動作し、b) 遅延なくすぐに動作し、レイアウトが最終的に流れたことを確認することに関連するタイミングの問題もありません。休憩所。しかし、この場合の CSS ソリューションはありますか?

CSS

あなたが与えたマークアップでは、CSSだけでクロスブラウザの方法（IE 6-8を含む）で画像を垂直方向に中央に配置する方法はありません。ただし、ラップする単一セルの表を含めるようにマークアップを少し変更すると、 で垂直方向に中央揃えにすることができますvertical-align:middle。マークアップは次のようになります。

<div id="display">
  <div id="slideshow1">
     <table cellspacing=0><tr><td style="height:200px;padding:0;vertical-align:middle">
       <img ... />
     </td></tr></table>  
  </div> 
</div>

余分な HTML クラフトですが、画像のサイズが変わってもスクリプトを実行せずに中央に配置します。

JS

代わりに JavaScript を使用したい場合は、gnarf が正しい考えを持っているように見えます (なぜ彼はすべての変数にドル記号で始まる名前を付けたのですか?) 私はそれを取り、本体を名前付き関数に移動して、いつでも呼び出すことができるようにします。あなたがしたい（言うrecenter）。最初のレンダリングでは、できるだけ早く実行する必要があるためrecenter()、マークアップのスライドショー DIV の直後に呼び出しをインライン化します。

于 2010-04-22T16:40:01.553 に答える