Выравнивание фотографий (с подписями) в центре веб-страницы с помощью CSS

Question

Я пытаюсь создать блок фотографий на моей веб-странице (которая имеет заданную ширину, я не копировал эту часть кода). Я поместил код в ссылку JSFiddle ниже.

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

Я воссоздаю то, что пытаюсь сделать в графическом редакторе. Нажмите здесь, чтобы посмотреть его: http://www.flickr.com/photos/adpartners/6630840127/in/photostream

Я не уверен, что я делаю неправильно с моей CSS / HTML. Все застряло слева, потому что я использовал float left в одном из моих тегов div. Я действительно хочу, чтобы фон был отцентрирован, то есть, поверх изображений, вот так: 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 /> (как вы это делали).

fiddle: http://jsfiddle.net/T2qHR/20/