将 12 个图像以 12 小时时钟格式排列

Question

明确一点：我不是要制作时钟，我只想在每个小时的位置有 12 张图像

是的，所以我想创建一个包含十二个（圆形）图标的 div，每个图标与 12 小时时钟的位置相同，如下所示：

到目前为止，我一直在玩，但没有得到很好的结果。到目前为止，我只尝试了“12”“3”“6”“9”的位置，但它们不会正确居中，margin:auto 0; 他们刚刚关闭。

有没有更简单、更整洁的方法来做到这一点？

FIDDLE

Answer 1

为了更容易且不必定位每张图片，您可以在灰色背景中水平居中放置 12 个 50% 高度的嵌套 div。然后你需要将每一个旋转 30 度（因为360/12 = 30）。

由于 div 都是嵌套的，子 div 将比其父 div 旋转 30 度并自动定位在正确的位置：

DEMO

.clock{
    position:relative;
    width:80%;
    padding-bottom:80%;
    margin:0 auto;
    background:lightgrey;
    overflow:hidden;
}

.clock div{
    height:100%;
    width:100%;
    
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}
.clock > div{
    position:absolute;
    width:5%; height:50%;
    top:0; left: 47.5%;
}
.clock div img{
    position:absolute;
    top:0;left:0;
    width:100%; height:auto;    
}

<div class="clock">
    <div><img src="http://www.clker.com/cliparts/W/i/K/w/1/D/glossy-orange-circle-icon-hi.png"/>
        <div><img src="http://www.clker.com/cliparts/W/i/K/w/1/D/glossy-orange-circle-icon-hi.png"/>
            <div><img src="http://www.clker.com/cliparts/W/i/K/w/1/D/glossy-orange-circle-icon-hi.png"/>
                <div><img src="http://www.clker.com/cliparts/W/i/K/w/1/D/glossy-orange-circle-icon-hi.png"/>
                    <div><img src="http://www.clker.com/cliparts/W/i/K/w/1/D/glossy-orange-circle-icon-hi.png"/>
                        <div><img src="http://www.clker.com/cliparts/W/i/K/w/1/D/glossy-orange-circle-icon-hi.png"/>
                            <div><img src="http://www.clker.com/cliparts/W/i/K/w/1/D/glossy-orange-circle-icon-hi.png"/>
                                <div><img src="http://www.clker.com/cliparts/W/i/K/w/1/D/glossy-orange-circle-icon-hi.png"/>
                                    <div><img src="http://www.clker.com/cliparts/W/i/K/w/1/D/glossy-orange-circle-icon-hi.png"/>
                                        <div><img src="http://www.clker.com/cliparts/W/i/K/w/1/D/glossy-orange-circle-icon-hi.png"/>
                                            <div><img src="http://www.clker.com/cliparts/W/i/K/w/1/D/glossy-orange-circle-icon-hi.png"/>
                                                <div><img src="http://www.clker.com/cliparts/W/i/K/w/1/D/glossy-orange-circle-icon-hi.png"/></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>