div内の（水平方向と垂直方向の）画像をjQueryスライドショーと競合させる

Question

div内に縦横に画像をセンタリングするという記事がたくさんあることは知っています。 それは私の問題ではありません。私はそれをすることができました。

私は写真家の友達のために（カスタムWordpressテーマを使用して）ポートフォリオウェブサイトを構築しています。 http://alexdebrabant.com/front 自分のサイトの一部のページには1つの画像しかありません。その場合は、.imgcontent div内で画像を縦横に中心に置いても問題はありません（表の組み合わせを使用してください：table-cell 、垂直整列：ミドルとテキスト整列：センター） あなたがここで成功した例を見ることができます：適切に垂直配向し http://www.alexdebrabant.com/blog/emilia/（フルハイト、適切に水平に配置） http://www.alexdebrabant.com/blog/trusst-2/（全幅との）

しかし、いくつかの他のページjQueryのスライドショーでいくつかの写真を「ラップしました」。これらのページでは、divを使用して画像を中央に配置することができないようです。それらは左上に揃えられます。 あなたはここでは例を見ることができます： http://www.alexdebrabant.com/blog/divine-2/（div要素の整列左上）

私は問題は私が理解から、実際にすべての画像をロードし、jQueryのスライドショーによって引き起こされると考えてい

が、その後1以外のすべてが非表示になります。

私は、誰かがこの問題を克服する方法を知っていることを期待していました。 ありがとうございました！

Answer 1

スライドショープラグインが原因で問題が発生しました。スライドショープラグインは、画像が複数あると画像にposition: absolute; top:0; left:0を適用します。これは、親に割り当てられた配置定義を効果的に取り消します。

トランジションを見ると、画像は互いに融合しているため、それらは絶対的に配置する必要があります（それを達成する他の方法はありません）。

私は次のように働くだろうと思う：CSSで

<div class="imgcontent"> 
    <div class="img-slide"><div class="img-cell"><img.../></div></div> 
    <div class="img-slide"><div class="img-cell"><img.../></div></div> 
</div> 

：へ

<div class="imgcontent"> 
    <img.../> 
    <img.../> 
</div> 

を変更

.img-slide, .img-cell { 
    height: 660px; 
    width: 880px; 
} 
.img-cell { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 

我々が適用されますコンテナ（.imgcontent）寸法が知られている、ので、それらをラッパーに渡します。ラッパーはプラグインによって完全に配置されますが、その内容は単一のイメージの場合と同じように機能します。