对齐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; 
}