CSSを使用してウェブページの中央に写真（キャプション付き）を配置する

Question

私は自分のウェブページ上に写真のブロックを作成しようとしています（幅が設定されており、コードのその部分をコピーしませんでした）。私はコードを以下のJSFiddleリンクに入れました。

http://jsfiddle.net/T2qHR/12/

私はグラフィックエディタ上で行うことをしようとしています何を再作成します。表示するにはここをクリックしてください：http://www.flickr.com/photos/adpartners/6630840127/in/photostream

私は自分のcss/htmlで何が間違っているのか分かりません。私がdivタグの1つに残っている浮動小数点数を使用しているため、すべてが左に固定されています。私は本当にバックグラウンドを中心にしたいと思っています.3枚の写真、2枚の写真、1枚の写真、2枚の写真のように、その上に画像を置いてください。彼らはすべて私はすでにその部分のためのリンクを持っているYouTubeのビデオにリンクします。

ご協力いただければ幸いです。私はこのコードの10-20の異なるバージョンを
p、div、table、ol/liタグで行いました。そして、正にこのうちどれを使うべきかわかりません。

私が間違っていることが分かったら、私を記入してください。私はコードが失われています！あなたが提供するかもしれない任意の助け

多くのおかげで、 R

Answer 1

使用display: inline-block、代わりにtext-align: center。

div.floatingPic { display: inline-block; padding: 12px; } 

div.containerVid { border: 2px solid #99cc99; 
        background-color: #000000; 
        padding: 45px; 
        height: 890px; 
        border-radius: 10px; 
        margin-bottom: 25px; 
        text-align: center; } 

限り.containerVidが十分に広いと、画像が行で、彼らはもはやフィットするまで積み重ねていきます。ブレークを早期に強制したい場合は、単に<br />を追加するだけです（これまでのように）。

フィドル：http://jsfiddle.net/T2qHR/20/