center radio button below label

Question

Let\'s say I have some radio buttons with their labels looking like this:

My Label


        

Answer 1

JSFIDDLE

This alternative does not use div as wrappers, I use this to get a short DOM tree.

/* center radio below label */

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

  Fruits:

  Orange
    
  

  Apple
    
  

  Grape
    
  

  Lemon