Place 12 images in a 12 hour clock formation

Question

Just to be clear: I'm NOT trying to make a clock, I just want 12 images at the position of each hour

Right, so I want to create a div that holds twelve (circle) icons, each one at the same position as a 12 hour clock like so:

I'm playing about and not getting a very nice outcome so far. I've only tried the "12" "3" "6" "9" positions so far but they won't center properly, with margin:auto 0; they're just off.

Is there an easier, neater way to do this?

FIDDLE

Answer 1

To make it easier and not have to position each image, you can make 12 nested divs with 50% height horizontaly centered in the grey background. Then you need to rotate each one 30 degrees ( because 360/12 = 30).

As the div are all nested, the child divs will rotate 30 degrees more than it's parent and be automaticaly positioned in the right place :

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>