title: How to align radio buttons horizontally below labels
body: <p>So I am using the following HTML to display 4 radio buttons horizontally centered underneath their respective labels in a jsp:</p>
  
  <pre><code>&lt;s:form action="markUser" name="markUser" method="post" namespace="/secure/admin"&gt;
      &lt;div id="radioGroup"&gt;
  
          &lt;label for="markStudent"&gt;Mark User as Student&lt;/label&gt;
          &lt;input type="radio" name="mark" id="markStudent" value="Student" /&gt;
  
          &lt;label for="markAdmin"&gt;Mark User as Admin&lt;/label&gt;
          &lt;input type="radio" name="mark" id="markAdmin" value="Admin" /&gt;
  
          &lt;label for="markService"&gt;Mark User as Service&lt;/label&gt;
          &lt;input type="radio" name="mark" id="markService" value="Service" /&gt;
  
          &lt;label for="markNull"&gt;Mark User as Null&lt;/label&gt;
          &lt;input type="radio" name="mark" id="markNull" value="Null" /&gt;
  
      &lt;/div&gt;
  &lt;/s:form&gt;
  </code></pre>
  
  <p>And CSS:</p>
  
  <pre><code>.radioGroup label {
    display: inline-block;
    text-align: center;
    margin: 0 0.2em;
  }
  .radioGroup label input[type="radio"] {
    display: block;
    margin: 0.5em auto;
  }
  </code></pre>
  
  <p>But I keep getting misaligned buttons like the following</p>
  
  <p><img src="https://i.stack.imgur.com/h13U2.jpg" alt="It wont go horizontal:/"></p>
  
  <p>What might I be missing here?</p>