使用CSS在网页中心对齐照片（带字幕）

我想在我的网页上创建一个照片块（其中有一个设置宽度，我没有将该部分代码复制过来）。我已将代码放入下面的JSFiddle链接中。使用CSS在网页中心对齐照片（带字幕）

我将重新什么，我试图在图形编辑器做。点击这里查看它：http://www.flickr.com/photos/adpartners/6630840127/in/photostream

我不知道我在做什么错我的CSS/HTML。一切都停留在左边，因为我在我的一个div标签中使用了float。我真的希望背景能够居中，就是这样，然后将图像放在顶部，就像这样：3张照片，2张照片，1张照片，2张照片。他们都会链接到YouTube视频，我已经获得了该部分的链接。

任何帮助将不胜感激。我已经完成了10-20个不同版本的代码，其中
p，div，table，ol/li标签，并且诚实地不知道现在使用哪一个。

如果您看到我在做什么错了，请填写。我在损失代码！

非常感谢您可能提供的任何帮助， [R

来源

2012-01-03 user1128730

使用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/

来源

2012-01-03 23:09:28 benesch

非常感谢您的有用评论！它神奇地工作！你真了不起！ – user1128730 2012-01-04 16:57:05

没问题！如果你满意，你会介意接受答案吗？（只需点击左侧的复选标记。）它给了我一个不错的小声望提升。谢谢！：D – benesch 2012-01-04 20:22:58

当然，再次感谢！ – user1128730 2012-01-04 23:39:05

使用CSS在网页中心对齐照片（带字幕）

回答

相关问题