How can I align a radio button's text under the button itself [closed]

Question

I would like to have five radio buttons next to each other and have each one's text centered beneath its button. It should look like this:

     *     *     *     *     *
   Text1 Text2 Text3 Text4 Text5

Any help would be appreciated.

Answer 1

Here is html / css example to do what you want i think.

HTML :

<form action="">
    <div class="radio-box">
        <input type="radio" name="sex" value="male"><label>Male</label>
    </div>
    <div class="radio-box">
        <input type="radio" name="sex" value="male"><label>Male</label>
    </div>
    <div class="radio-box">
        <input type="radio" name="sex" value="male"><label>Male</label>
    </div>
    <div class="radio-box">
        <input type="radio" name="sex" value="male"><label>Male</label>
    </div>         
</form>

CSS :

form {
    width: 100%;
}
div.radio-box {
    width: 100px;
    display: inline-block;
    margin: 5px;
    background-color: yellow;
}
.radio-box label {
    display:block;
    width: 100px;
    text-align: center;
}
.radio-box input {
    width: 20px;
    display: block;
    margin: 0px auto;
}

you can test it here : http://jsfiddle.net/E4FPu/1/

Answer 2

Well, it would help if you played around with it, but this is the way that I would do it: http://jsfiddle.net/ZAfTy/2/

<div>
    <label><input type="radio" name="radioset" />title 1</label>
    <label><input type="radio" name="radioset" />title 2</label>
    <label><input type="radio" name="radioset" />title 3</label>
    <label><input type="radio" name="radioset" />title 4</label>
    <label><input type="radio" name="radioset" />title 5</label>
</div>

CSS:

input[type=radio] {
    display: block;
    margin: 0 auto;
}
label {
    display: inline-block;
}

Basically, the radio button takes the entire width of the parent, and the labels are aligned inline-block to each other.