html - Align Radio-Buttons and its Labels -

i getting crazy right since try style radio buttons hours , cant reach goal (im new world of css).

what want simple:

i want 3 big radiobuttons underneath each other centered in div labels vertically aligned buttons. similar this:

i have following html:

<div class="answers">     <label>         <input type="radio" name="answers" value="male" />     </label>     <label>         <input type="radio" name="answers" value="female" /> name     </label>     <label>         <input type="radio" name="answers" value="male" /> vendor no.     </label> </div> 

and result this:

i want bigger buttons , bigger text. want text to right of buttom little padding. want radio buttons centered. tried many things looking weird. pls me... beginning hate css....

you can use css:

.answers label {   display: block;   font-size: 20px;   line-height: 30px;   margin: 0 auto;   width: 150px; } .answers {   width: 100%; } .answers input[type="radio"] {   height: 30px;   line-height: 30px;   vertical-align: bottom;   width: 30px; } 

jsfiddle: http://jsfiddle.net/ghorg12110/uqyfbjsb/