Phil Powis
Phil Powis

Reputation: 173

aligning radio buttons within a div

This is my first attempt at using javscript with html/css. I have a button that when clicked shows a question, and three radio buttons. Everything so far so good, but I would like the radio buttons to be aligned with their actual button on the left (not the text). The content div is centered, so it seems like it is just centering the radio buttons to the page, but not relative to one another. I think if you take a look at my link you will understand:

Link to example page

Any ideas on how I can get the affect I am looking for here? Admittedly this is pretty clunky but baby steps :)

Here is my 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>

Here is a snippet from my 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;
 }

Upvotes: 0

Views: 1914

Answers (2)

adela
adela

Reputation: 143

form {

padding-left: 559px;

text-align: left;

}

Upvotes: 1

pax162
pax162

Reputation: 4735

Try this:

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

and the CSS:

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

Upvotes: 1

Related Questions