css - ejemplo - label html

Cómo centrar un conjunto de botones de radio html en un fieldset con div

Question

Tengo un conjunto de botones de radio y etiquetas. Los botones de radio preceden a las etiquetas. Me gustaría centrar el conjunto de ellos dentro de un conjunto de campos. Intenté ponerlos en un div con pantalla configurada en bloque en línea. Casi funciona, pero una etiqueta se reduce a la siguiente línea.

Según entendí, dar una visualización de div: bloque en línea lo haría encoger para ajustar , pero estoy obteniendo el comportamiento inesperado que puede ver aquí (código a continuación):

http://jsfiddle.net/abalter/TedVe/13/

¿Es mi única esperanza establecer manualmente los márgenes y esas cosas? ¿Hay alguna manera de entender por qué el div se está reduciendo demasiado?

Actualizar ... Si elimino el margen derecho de la etiqueta (que está allí para agregar espacio antes del siguiente botón de opción), entonces cabe. Si, en cambio, agrego margen izquierdo al botón, todavía tengo el problema.

<form>
<fieldset>
<legend>Test</legend>
<div>
<input class="radio-input" type="radio" name="test" value="yes" />
<label class="radio-label">Yes</label>
<input class="radio-input" type="radio" name="test" value="yes" />
<label class="radio-label">No</label>
<input class="radio-input" type="radio" name="test" value="yes" />
<label class="radio-label">Maybe</label>
</div>
</fieldset>

.radio-label {
float: left;
margin-right: 3%;
}
.radio-input {
float: left;
}
fieldset {
text-align: center;
}
div {
display: inline-block;
margin: auto;
border: 1px solid black;
}

Answer 1

Prueba con este float left eliminación en tu .radio-label y .radio-input y ahora define

display inline-block

Como así

.radio-label {
display: inline-block;
vertical-align: top;
margin-right: 3%;
}
.radio-input {
display: inline-block;
vertical-align: top;
}

Manifestación

Answer 2

Simplemente elimine todos los estilos, pero text-align: center y lo obtuvo. No es necesario mostrar: bloque en línea.

aquí hay un violín actualizado:

http://jsfiddle.net/TedVe/8/

.radio-label {}
.radio-input {}
fieldset {
text-align: center;
}
div {}

Answer 3

agregar ancho para div entonces su problema puede ser reparado

.radio-label {
float: left;
margin-right: 3%;
}
.radio-input {
float: left;
}
fieldset {
text-align: center;
}
div {
display: inline-block;
margin: auto;
border: 1px solid black;
width:50%
}

Answer 4

use this following css.
.radio-label {
margin-right: 3%;
}
fieldset {
text-align: center;
}
div {
display:inline;
border: 1px solid black;
}