Align Radio-Buttons and its Labels

Question

I am getting crazy right now since i try to style my radio buttons for hours now and i cant reach my goal (im completely new to the world of css).

What i want to do is simple:

I want three big radiobuttons underneath each other centered in my div with labels vertically aligned to the buttons. something similar to this:

enter image description here

I have the following html:

<div class="answers">
    <label>
        <input type="radio" name="answers" value="male" /> All
    </label>
    <label>
        <input type="radio" name="answers" value="female" /> Name
    </label>
    <label>
        <input type="radio" name="answers" value="male" /> Vendor No.
    </label>
</div>

And the result is this:

enter image description here

I want much bigger buttons and much bigger text. i want the text to be to the right of the buttom with a little padding. i want all radio buttons to be centered. I tried many things but everything was just looking weird. Pls help me... i am beginning to hate css....

Well, the layout depends on the CSS, which you haven't posted, but I'm betting that your `input` is styled as `display:block;` — Slavenko Miljic, Jun 29 '15 at 14:59
for the result i posted above i did not use any cs. the div isnt styled so arent the label and the input. its the standard result i get from just using the html — Mulgard, Jun 29 '15 at 14:59
http://stackoverflow.com/questions/2306117/radio-buttons-and-label-to-display-in-same-line — isherwood, Jun 29 '15 at 15:00
label{ display:block; } http://plnkr.co/edit/7AGJsjw6u0V7XyuI7T8i?p=preview — Arthur Tsidkilov, Jun 29 '15 at 15:05
Don't keep text open like that. wrap in a span. and use this code. [Fiddle](http://jsfiddle.net/venkateshwar/6g5gLjy7/) — Mr_Green, Jun 29 '15 at 15:18

Alex Char · Answer 1 · 2015-06-29T15:03:42.317

2

The only reason to happen this is to have display: block somewhere in your css to radios:

input[type=radio] {
  display: block;
}

<div class="answers">
  <label>
    <input type="radio" name="answers" value="male" />All
  </label>
  <label>
    <input type="radio" name="answers" value="female" />Name
  </label>
  <label>
    <input type="radio" name="answers" value="male" />Vendor No.
  </label>
</div>

You can add display: block to second label using nth-child:

label:nth-child(2) {
  display: block;
}

<div class="answers">
  <label>
    <input type="radio" name="answers" value="male" />All
  </label>
  <label>
    <input type="radio" name="answers" value="female" />Name
  </label>
  <label>
    <input type="radio" name="answers" value="male" />Vendor No.
  </label>
</div>

References

nth-child

edited Jun 29 '15 at 15:03

answered Jun 29 '15 at 15:00

Alex Char

32,879
9
49
70

no. i have no css at all for the div, the label and the input! – Mulgard Jun 29 '15 at 15:00
Do you use external css files? Like bootstrap? – Alex Char Jun 29 '15 at 15:01
no. i have pure html without any css now. its just a single file. – Mulgard Jun 29 '15 at 15:02
Check my suggest solution. – Alex Char Jun 29 '15 at 15:03

Pooshonk · Answer 2 · 2015-06-29T15:05:42.677

2

http://jsfiddle.net/6b888vp8/2/

Add display: block to the label in the answers div, and float left to the inputs. HTML has changed too

.answers label {
    display: block
}

.answers input[type="radio"] {
    float: left;
}

<div class="answers">
    <input type="radio" name="answers" value="male" /><label>All</label>
    <input type="radio" name="answers" value="female" /><label>Name</label>
    <input type="radio" name="answers" value="male" /><label>Vendor No.</label>
</div>

edited Jun 29 '15 at 15:05

answered Jun 29 '15 at 15:00

Pooshonk

1,284
2
22
49

i dont want all radio buttons to be on one line! – Mulgard Jun 29 '15 at 15:02
but thats again not what i want. the text is not vertically centered to the radio buttons.... thats the reason why i hate css... – Mulgard Jun 29 '15 at 15:03
Updated my fiddle, is that what you want? – Pooshonk Jun 29 '15 at 15:05
its quite good but if i increas the font-size of the label text it isnt vertically aligned with the radio button. – Mulgard Jun 29 '15 at 15:10

Magicprog.fr · Accepted Answer · 2015-06-29T15:24:11.297

2

You can use this CSS:

.answers label {
  display: block;
  font-size: 20px;
  line-height: 30px;
  margin: 0 auto;
  width: 150px;
}
.answers {
  width: 100%;
}
.answers input[type="radio"] {
  height: 30px;
  line-height: 30px;
  vertical-align: bottom;
  width: 30px;
}

JSFiddle: http://jsfiddle.net/ghorg12110/uqyfbjsb/

edited Jun 29 '15 at 15:24

answered Jun 29 '15 at 15:04

Magicprog.fr

4,072
4
26
35

with that css the text is still under the radio buttons. – Mulgard Jun 29 '15 at 15:05
@Mulgard updated my answer. Which browser are you using ? – Magicprog.fr Jun 29 '15 at 15:07
google chrome: if i use your code it does not look like in your jsfiddle. the text is not vertically aligned to the radio buttons – Mulgard Jun 29 '15 at 15:11
@Mulgard this can be due to the width of your anwers div. I've updated my answer with a class to set a width (but probably not). You've said you don't have any CSS right ? can you post your full HTML ? (I've just tried on chrome using a local file, and it's looks the same as the fiddle) – Magicprog.fr Jun 29 '15 at 15:16
pls add `.answers input[type="radio"] { float: left; width: 30px; height: 30px; }` to your js fiddle and see what happens. – Mulgard Jun 29 '15 at 15:20
@Mulgard updated the answer to include your input width correctly – Magicprog.fr Jun 29 '15 at 15:25

score -1 · Answer 4 · answered Dec 04 '21 at 16:26

-1

This one worked for me:

 input[type="radio"]{
    width: 50px !important;
 }

Try it out and check if it works for you as well.

answered Dec 04 '21 at 16:26

Anish Narayan

72
2
8

`!important` is bad practice and should not be used by web developers unless absolutely necessary (or perhaps never, depending on who you ask). It exists for user stylesheets so that users may adjust the styling of a website (for example to aid accessibility). – Ben Dec 05 '21 at 01:14

Align Radio-Buttons and its Labels

4 Answers4