How to center a set of html radio buttons in a fieldset with div
Solution 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;
}
Solution 2
Just remove all styles but text-align:center and you got it. No need to display: inline-block.
here's an updated fiddle:
.radio-label {}
.radio-input {}
fieldset {
text-align: center;
}
div {}
Solution 3
use this following css.
.radio-label {
margin-right: 3%;
}
fieldset {
text-align: center;
}
div {
display:inline;
border: 1px solid black;
}
Related videos on Youtube
abalter
Updated on August 28, 2020Comments
-
abalter over 3 years
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; }
-
abalter over 10 yearsSimplest 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 over 10 yearsSimilar to @Bart's solution, except, maintains other styling such as the spacing and the vertical alignment between labels and buttons.
-
Bart Calixto over 10 years@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.