Centered Vertical Radial Buttons - html

Question

http://liveweave.com/73vub5
So I got the objects to display the way I want as seen in the image, but my problem now is when I choose the second object the first should become unchecked and choose the second one. Using regular input boxed just inside a form it does it automatically without the need for JavaScript. Anyway to fix this that'll same me tons of time coding so I don't have to define it in Javascript/JQuery each time an object has been selected/checked and deselected/unchecked.
<style type="text/css">
div#container div {
display:inline-block;
margin:1.25%;}
div#circle {
width:40px;
height:40px;
border:1px dashed #000;
border-radius:50%;}
div#square {
width:40px;
height:40px;
border:1px dashed #000;}
</style>
<div id="container" align="center">
<form>
<div id="square"><br><br>
<input type="radio" name="squareselec" checked="true"></div>
<div id="circle"><br><br>
<input type="radio" name="circleselec"></div>
</form>
</div>

Answer 1

To center the input element, you'll need to make the radio display: inline-block; - and it's container text-align: center;
I sugest staying away from id's unless using them for javaScript hooks or very special reasons. HERE is a jsfiddle with the code for you to play with. I hope this helps. -nouveau
HTML
<div class="object-wrapper">
<img alt="image name" src="http://placehold.it/50x50" />
<input type="radio" name="squareselec" />
</div>
<div class="object-wrapper">
<img alt="image name" class="circle" src="http://placehold.it/50x50" />
<input type="radio" name="squareselec" />
</div>
CSS
.object-wrapper {
width: 3em; /* arbitrary */
text-align: center;
/* to explain visually */
border: 1px solid red;
padding: .1em;
/* to grid them */
float: left;
margin-right: .5em;
}
.object-wrapper img {
display: inline-block;
width: 100%;
height: auto;
}
.object-wrapper input[type="radio"] {
display: inline-block;
}
.circle { /* to make a circle */
-webkit-border-radius: 100%;
border-radius: 100%;
}