CODEWITHSUNDEEP
htmlcss
Mulgard
Mulgard

Reputation: 10609

Align Radio-Buttons and its Labels

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....

Upvotes: 1

Views: 2419

Answers (4)

Anish Narayan
Anish Narayan

Reputation: 82

This one worked for me:

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

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

Upvotes: -1

Magicprog.fr
Magicprog.fr

Reputation: 4100

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/

Upvotes: 2

Pooshonk
Pooshonk

Reputation: 1324

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>

Upvotes: 2

Alex Char
Alex Char

Reputation: 33228

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

Upvotes: 2

Related Questions