显示中心向外辐射的图像,而不是行的左上角

时间:2014-04-07 14:42:03

标签: javascript jquery html css html5

现在确定如何说出这一点,这可能就是为什么我的搜索没有给我任何东西。

基本上,通常如果你放出一堆图像:

<img src="whatever.jpg"><img src="whatever2.jpg"><img src="whatever3.jpg">

图像将从左上角出现,然后在到达屏幕末尾时换行到下一行。

我应该怎么做才能让图像从中心开始,新图像从中心展开,而不是从行中展开?我认为这样做会涉及某种数学,我的数学很糟糕。我想几个月前我最后一次尝试这个时,我最终只是制作一个螺旋而不是下面的示例图像(这是我想要实现的)。

http://i.stack.imgur.com/eUU9C.jpg

稍后在完成这项工作后的轨道上,我希望能够滚动它,以创建一个无限的&#34;许多图片会保持&#34;成长&#34;。所以我认为这会使用画布(html5)?

有什么想法吗?

1 个答案:

答案 0 :(得分:2)

添加

text-align: center;

到包装元素。由于图像是(默认情况下)内联元素,因此它们将被放置在中心位置。

如果行不够宽,您可能还需要white-space: nowrap来避免破坏行。

Demo