Comment aligner les boutons radio horizontalement sous les étiquettes

Donc je suis en utilisant le code HTML suivant pour afficher 4 boutons radio centrée horizontalement en dessous de leurs labels respectifs dans une jsp:

<s:form action="markUser" name="markUser" method="post" namespace="/secure/admin">
    <div id="radioGroup">

        <label for="markStudent">Mark User as Student</label>
        <input type="radio" name="mark" id="markStudent" value="Student" />

        <label for="markAdmin">Mark User as Admin</label>
        <input type="radio" name="mark" id="markAdmin" value="Admin" />

        <label for="markService">Mark User as Service</label>
        <input type="radio" name="mark" id="markService" value="Service" />

        <label for="markNull">Mark User as Null</label>
        <input type="radio" name="mark" id="markNull" value="Null" />

    </div>
</s:form>

Et CSS:

.radioGroup label {
  display: inline-block;
  text-align: center;
  margin: 0 0.2em;
}
.radioGroup label input[type="radio"] {
  display: block;
  margin: 0.5em auto;
}

Mais je reçois mal alignées boutons comme suit

Comment aligner les boutons radio horizontalement sous les étiquettes

Ce que je pourrais manquer ici?

Vous voulez que le bouton radio à droite du texte?
Voulez-vous de toutes les étiquettes horizontales et chaque bouton radio en dessous de chaque étiquette?
Non, aligné horizontalement avec les boutons au centre à droite en dessous de chaque étiquette correspondante
J'ai essayé d'enlever l'étiquette, et même résultat:/

OriginalL'auteur Sean | 2015-06-30