Comment centrer un ensemble de boutons radio html dans un fieldset avec div

Question

J'ai un ensemble de boutons radio et d'étiquettes. Les boutons radio précèdent les étiquettes. Je voudrais centrer l'ensemble d'entre eux dans un ensemble de champs. J'ai essayé de les mettre dans un div avec l'affichage réglé sur inline-block. Presque fonctionne, mais une étiquette est réduite à la ligne suivante.

Je crois comprendre que donner un affichage div: inline-block rendrait shrink-to-fit, mais je reçois le comportement inattendu vous pouvez voir ici (code ci-dessous):

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

est mon seul espérons définir manuellement les marges et d'autres choses? Y at-il un moyen de comprendre pourquoi la div rétrécit juste un peu trop ??

Mise à jour ... Si je supprime la marge de droite de l'étiquette (qui est là pour ajouter de l'espace avant le bouton radio suivant), alors il convient. Si, au lieu de cela, j'ajoute margin-left au bouton, j'ai toujours le problème.

<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

Essayez cette supprimerfloat left sur votre .radio-label et .radio-input et maintenant définir

display inline-block 

Comme comme celui-ci

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

Demo

Answer 2

supprimer tous les styles, mais juste texte-align: center et vous l'avez. Pas besoin d'afficher: inline-block.

est ici un violon mise à jour:

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

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

Answer 3

use this following css. 

.radio-label { 
    margin-right: 3%; 
} 

fieldset { 
    text-align: center; 
} 
div { 
    display:inline; 
     border: 1px solid black; 
} 

Answer 4

ajouter la largeur de div alors votre problème peut fixe

.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% 
}