对齐 div 内的单选按钮

Question

这是我第一次尝试在 html/css 中使用 javscript。我有一个按钮，点击后会显示一个问题，还有三个单选按钮。到目前为止一切都很好，但我希望单选按钮与左侧的实际按钮（而不是文本）对齐。内容 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 中的一个 sn-p：

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