How to center a set of html radio buttons in a fieldset with div

Question

I have a set of radio buttons and labels. The radio buttons precede the labels. I would like to center the set of them within a field set. I tried putting them in a div with display set to inline-block. Almost works, but one label gets bumped down to the next line.

My understanding was that giving a div display: inline-block would make it shrink-to-fit, but I'm getting the unexpected behavior you can see here (code below):

http://jsfiddle.net/abalter/TedVe/13/

Is my only hope to manually set margins and stuff? Is there a way to understand why the div is shrinking just a bit too much??

Update... If I remove the right margin from the label (which is there to add space before the next radio button) then it fits. If, instead, I add margin-left to the button, I still have the problem.

<form>
<fieldset>
    <legend>Test</legend>
    <div>
        <input class="radio-input" type="radio" name="test" value="yes" />
        <label class="radio-label">Yes</label>
        <input class="radio-input" type="radio" name="test" value="yes" />
        <label class="radio-label">No</label>
        <input class="radio-input" type="radio" name="test" value="yes" />
        <label class="radio-label">Maybe</label>
    </div>
</fieldset>

.radio-label {
    float: left;
    margin-right: 3%;
}
.radio-input {
    float: left;
}
fieldset {
    text-align: center;
}
div {
    display: inline-block;
    margin: auto;
    border: 1px solid black;
}

score 6 · Accepted Answer · answered Aug 28 '13 at 04:40

6

Try this remove float left on your .radio-label and .radio-input and now define

display inline-block

As like this

.radio-label {
   display: inline-block;
    vertical-align: top;
    margin-right: 3%;
}
.radio-input {
   display: inline-block;
    vertical-align: top;
}

Demo

answered Aug 28 '13 at 04:40

Rohit Azad Malik

31,410
17
69
97

Similar to @Bart's solution, except, maintains other styling such as the spacing and the vertical alignment between labels and buttons. – abalter Sep 09 '13 at 20:05

score 6 · Answer 2 · answered Aug 28 '13 at 04:41

6

Just remove all styles but text-align:center and you got it. No need to display: inline-block.

here's an updated fiddle:

http://jsfiddle.net/TedVe/8/

.radio-label {}
.radio-input {}
fieldset {
    text-align: center;
}
div {}

answered Aug 28 '13 at 04:41

Bart Calixto

19,210
11
78
114

Simplest solution, but does not keep radio labels spaced apart with margin. But gets to the point that all that is needed is to text-align the fieldset. Nonetheless, would cause problems if I had other elements in the fieldset, such as a text input, that I did NOT want centered. – abalter Sep 09 '13 at 20:03
@abalter all that can be easily achieved. If you have any question on how to do that, just answer with that information. you can have a div wrapping the elements you want centered and applying a class. you get the point. – Bart Calixto Sep 13 '13 at 19:19

score 1 · Answer 3 · answered Aug 28 '13 at 05:00

1

use this following css.

.radio-label {
  margin-right: 3%;  
}

fieldset {
    text-align: center;
}
div {
     display:inline;
        border: 1px solid black;
}

answered Aug 28 '13 at 05:00

score 0 · Answer 4 · answered Aug 28 '13 at 07:17

add width for div then your problem may fixed

.radio-label {
    float: left;
    margin-right: 3%;
}
.radio-input {
    float: left;
}
fieldset {
    text-align: center;
}
div {
    display: inline-block;
    margin: auto;
    border: 1px solid black;
    width:50%
}

How to center a set of html radio buttons in a fieldset with div

4 Answers4