выравнивание радиокнопки в div

Question

Это моя первая попытка использования javscript с html/css. У меня есть кнопка, когда при нажатии появляется вопрос и три переключателя. Все до сих пор так хорошо, но я бы хотел, чтобы переключатели были выровнены с их фактической кнопкой слева (а не текстом). Содержимое div центрировано, поэтому кажется, что он просто центрирует радиокнопки на странице, но не относительно друг друга. Я думаю, если вы посмотрите на мою ссылку, вы поймете:

Link to example page

Любые идеи о том, как я могу получить аффект Ищу здесь? Правда, это довольно неуклюжим, но ребенок шаги :)

Вот мой HTML:

<!-- Here is the main content --> 
     <div class="content"> 
      <h1>Quiz With Javascript</h1> 
      <p>This is a simple quiz leveraging javascript.</p> 
      <div class="btn-group"> 
       <input type="button" class="btn btn-primary btn-lg" onclick="showDiv()" value="Click Here For The Question" /> 
      </div> 
      <div id="question1"> 
       <h3>Where Does Phil Work?</h3> 
     <div> 
      <form> 

        <input type="radio" name="work" id="optionsRadios1" value="INTUIT">Intuit<br> 
        <input type="radio" name="work" value="GOOGLE">Google<br> 
        <input type="radio" name="work" value="AMAZON">Amazon<br> 

      </form> 
     </div> 

     <script src="js/quiz.js"></script> 

     <script type="text/javascript"> 
     function showDiv() { 
      document.getElementById('question1').style.display = "block"; 
     } 
     </script> 

    </div> 

Вот отрывок из моего CSS:

body { 

    margin: 50px 0px; 
    padding: 0px; 
    background-color: #7FFFD4; 
    border-radius: 25px; 

} 

.content { 
    text-align: center; 
} 

input[type='radio']{ 
    vertical-align: baseline; 
    padding: 10px; 
    margin: 10px; 
} 

Answer 1

форма {

padding-left: 559px; 

text-align: left; 

}

Answer 2

Попробуйте это:

<form style=""> 
        <div class="centerDiv"> 
         <input type="radio" name="work" id="optionsRadios1" value="INTUIT">Intuit<br> 
         <input type="radio" name="work" value="GOOGLE">Google<br> 
         <input type="radio" name="work" value="AMAZON">Amazon<br> 
        </div> 
</form> 

и CSS:

.centerDiv { 
display: inline-block; 
margin: auto; 
text-align: left; 
}