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

Answer 1

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