居中的垂直收音机按钮

Question

http://liveweave.com/73vub5

所以我得到的对象显示我想要的方式，如图中所示，但我现在的问题是当我选择第二个对象时，第一个应该取消选中并选择第二个对象。使用在表单内部的常规输入框，它可以自动完成，而无需使用JavaScript。无论如何要解决这个问题，即同样的大量时间编码，所以每次选择/检查和取消选择/取消选中对象时，我都不必在Javascript / JQuery中定义它。

<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

要使输入元素居中，您需要进行无线电显示：inline-block; - 它是容器text-align：center;

除非将它们用于javaScript钩子或非常特殊的原因，否则我会远离id。 HERE is a jsfiddle包含您可以使用的代码。我希望这有帮助。 -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%;
}