vogueサイトのようなスライドを作りたいのですが

質問

始めて質問させて頂くので、質問のしかたに不備等あれば申し訳ありません。

表題の通り、下記にURLを記載しているvogueのサイトに実装されているようなスライドショーを作ろうとしているのですが、レイアウトがうまく出来ません。
http://www.vogue.co.jp/

制作にあたって、Twilight Slideshow（配布サイト：http://love-media.net/twilight-show-en）というjQueryプラグインがあったのでこちらを使用してある程度の形までは出来上がりました。

躓いているのは、vogueのサイトのようにブラウザのウィンドウ幅いっぱいにスライドを表示した上で、さらにウィンドウ幅を拡大縮小しても常にスライドの現在の画像が中央に表示されるようにしたいのですが、現状ではウィンドウ幅を変更するとスライドの中心がどんどんブラウザの中央からズレていってしまいます。
正確には、左側に表示させている一つ前のスライド画像の幅が固定され、右側の次のスライド画像だけ表示幅が変更されてしまうためスライドの中心がズレていくという状況です。

cssの指定で、スライド部分のdivに対してposition:absoluteで位置決めをしても上手く行きませんでした。
また、スライドに対してwidthをピクセル単位で指定した場合は上手く行くのですが、目標のサイトのようにwidth:100%とすると上記のようなズレが発生します。

どのようにcss、及びjQueryを設定すれば常にスライドを中央表示させることができるのでしょうか？

もしくは、使用しているTwilight Slideshowではそのような設定は出来ないのでしょうか？そうであれば、vogueのサイトのような仕様のスライドショーを作るにはどうしたらいいのでしょうか？

お知恵を貸してくださる方がいらっしゃいましたら何卒よろしくお願い致します。

回答No.2

tracer

Vogueは一旦忘れて、まずは要素のセンタリングの方法からですね。
たとえば、単純にpをセンタリングする方法はご存知なのでしょうか？

https://www.google.co.jp/search?num=100&hl=ja&newwindow=1&safe=off&q=css+%E3%82%BB%E3%83%B3%E3%82%BF%E3%83%AA%E3%83%B3%E3%82%B0&oq=css+%E3%82%BB%E3%83%B3%E3%82%BF%E3%83%AA%E3%83%B3%E3%82%B0&gs_l=serp.3..0i7l10.6754.9589.0.9644.13.11.2.0.0.0.119.1134.0j10.10.0...0.0...1c.nruOu0JHpDY

回答No.1

ORUKA1951

画像を中央配置し縦横比を変えないためには、
・画像は行内要素をdisplayblockでblock要素にする。
・widthプロパティで巾を決める。margin-right/margin-leftの値をautoとする。
・heightの値はautoとする
の三点セットです。

お礼

お礼が遅くなってしまい大変申し訳ありません。
ご回答頂き誠にありがとうございます。

質問の仕方が分かりにくかったようで申し訳ありません。

これまでの経験ではご回答頂いたような記述で中央表示できていたのですが、今回使用したTwilightSlideshowというプラグインで作成したスライドこの方法でセンタリングできなかったんです。（ページ読み込み時は中央表示されるのですがブラウザのウィンドウ幅を伸縮すると中央からズレていきます。）

結局、別のプラグインを使用すれば同じcssの記述でも中央表示ができましたので、TwisightSlideshowの使用は一旦取りやめたという現状です。