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

发布于 2024-12-23 18:45:10 字数 667 浏览 0 评论 0原文

我试图在我的网页上创建一个照片块（它有一个设定的宽度，我没有复制那部分代码）。我已将代码放入下面的 JSFiddle 链接中。

我将重新创建我想要做的事情图形编辑器。单击此处查看：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 标签，老实说，现在不知道该使用哪一个。

如果您发现我做错了什么，请填写我的信息。我失去了代码！

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

诗化ㄋ丶相逢 2024-12-30 18:45:10

使用 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 足够宽，图像就会继续堆叠，直到不再适合该行。如果您想强制提前休息，只需添加（就像您一直在做的那样）。

小提琴：http://jsfiddle.net/T2qHR/20/

Use display: inline-block and text-align: center instead.

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; }

As long as .containerVid is wide enough, images will continue to stack up until they no longer fit in the row. If you want to force a break early, simply add a <br /> (as you've been doing).

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

回复收藏 0 原文

~没有更多了~