Center radio button vertically next to label

Question

I'm trying to center all my radio buttons vertically with its label, but vertical-align doesn't help:

input[type="radio"]{
    vertical-align: center;
}

<p style="display:inline-block;margin:0 0;"> Option: </p>
<label>
<input type="radio" name="group1"> Label1
</label>
<label>
<input type="radio" name="group1"> Label2
</label>
<label>
<input type="radio" name="group1"> Label3
</label>

score 0 · Answer 1 · answered Aug 12 '17 at 16:29

0

Correct is: vertical-align: middle;

answered Aug 12 '17 at 16:29

Tony Duffill

277
1
5

depends on your line height too, when dealing with inline-block elements. – Stuart Aug 12 '17 at 16:30

score 0 · Answer 2 · answered Aug 12 '17 at 16:45

0

You can use these CSS settings:

input[type="radio"] {
  display: block;
  margin: 0 auto 5px auto;
  
}
label {
  text-align: center;
  display: inline-block;
  width: 80px;
}

<p style="display:inline-block;margin:0 0;"> Option: </p>
<label>
<input type="radio" name="group1"> Label1
</label>
<label>
<input type="radio" name="group1"> Label2
</label>
<label>
<input type="radio" name="group1"> Label3
</label>

And applied to your jsfiddle: https://jsfiddle.net/p5ts1rco/1/

answered Aug 12 '17 at 16:45

Johannes

64,305
18
73
130

radio buttons above text?) Anyway I solved it: https://stackoverflow.com/a/45652690/7767664 – user924 Aug 12 '17 at 16:48
"center vertically with its label" - I understood you that way... What is centered in your solution, and what's the difference to the question? – Johannes Aug 12 '17 at 16:50

score 0 · Accepted Answer · edited Apr 13 '23 at 15:29

I edit this example for checkboxes https://stackoverflow.com/a/494922/7767664 (changed to radio buttons):

.checkboxes label {
  display: block;
  float: left;
  padding-right: 3px;
  white-space: nowrap;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
  font-size:29px;
}

<div class="checkboxes">
    <label> <span>Option: </span></label>
    <label><input type="radio" name="group1" id="x" /> <span>Label text x</span></label>
    <label><input type="radio" name="group1" id="y" /> <span>Label text y</span></label>
    <label><input type="radio" name="group1" id="z" /> <span>Label text z</span></label>
</div>

Center radio button vertically next to label

3 Answers3