使用 CSS 在网页中心对齐照片（带标题）

Question

我正在尝试在我的网页上创建一个照片块（它有一个固定的宽度，我没有复制那部分代码）。我已将代码放入下面的 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 标签，老实说现在不知道该用哪一个。

如果您发现我做错了什么，请填写我。我不知道代码了！

非常感谢您提供的任何帮助， 回复

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/