html - 使用 CSS 在网页中心对齐照片(带标题)

Question

我想在我的网页上创建一个照片 block (它有一个设置的宽度，我没有复制那部分代码)。我已将代码放入下面的 JSFiddle 链接中。

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

我将在图形编辑器上重新创建我正在尝试做的事情。点此查看:http://www.flickr.com/photos/adpartners/6630840127/in/photostream

我不确定我的 css/html 做错了什么。一切都卡在左边，因为我在我的一个 div 标签中使用了 float left 。我真的希望背景居中，确实如此，然后将图像放在它的顶部，如下所示: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/