How to vertically align a html radio button to it s label

Question

I have a form with radio buttons that are on the same line as their labels  The radio buttons are however not aligned vertically with their labels as shown in the screenshot below      How can I vertically align the radio buttons with their labels   Edit    Here s the html code    lt input checked  checked  type  radio  name  user level  id  rd1  value  1   gt   lt label for  rd1  gt radio 1 lt  label gt  lt br  gt   lt input type  radio  name  user level  id  rd2  value  2   gt   lt label for  rd2  gt radio 2 lt  label gt  lt br  gt   lt input type  radio  name  user level  id  rd3  value  3   gt   lt label for  rd3  gt radio 3 lt  label gt  lt br  gt    And the css code   label      padding 5px      color  222      font-family corbel sans-serif      font-size  14px      margin  10px

User · Answer

While I agree tables shouldn t be used for design layouts contrary to popular belief they do pass validation  i e  the table tag is not deprecated  The best way to align radio buttons is using the vertical align middle CSS with margins adjusted on the input elements

User · Answer

A lot of these answers say to use vertical-align  middle   which gets the alignment close but for me it is still off by a few pixels  The method that I used to get true 1 to 1 alignment between the labels and radio inputs is this  with vertical-align  top     x000D   x000D  label  label gt input  x000D      font-size  20px  x000D      display  inline-block  x000D      margin  0  x000D      line-height  28px  x000D      height  28px  x000D      vertical-align  top  x000D    x000D   lt h1 gt How are you  lt  h1 gt  x000D   lt fieldset gt  x000D    lt legend gt Your response  lt  legend gt  x000D    lt label for  radChoiceGood  gt  x000D     lt input type  radio  id  radChoiceGood  name  radChoices  value  Good  gt Good x000D    lt  label gt  x000D    x000D    lt label for  radChoiceExcellent  gt  x000D     lt input type  radio  id  radChoiceExcellent  name  radChoices  value  Excellent  gt Excellent x000D    lt  label gt  x000D    x000D    lt label for  radChoiceOk  gt  x000D     lt input type  radio  id  radChoiceOk  name  radChoices  value  OK  gt OK x000D    lt  label gt  x000D   lt  fieldset gt  x000D   x000D   x000D

User · Answer

You can do like this   input       vertical-align middle     label      color  222      font-family corbel sans-serif      font-size  14px

User · Answer

Something like this should work  CSS   input       float  left      clear  left      width  50px      line-height  20px     label       float  left      vertical-align  middle

User · Answer

try adding vertical-align top into the css  label      padding 5px      color  222      font-family corbel sans-serif      font-size  14px      margin  10px      vertical-align top       Test  http   jsfiddle net muthkum heAWP

User · Answer

Might as well add a bit of flex to the answers    x000D   x000D   Radio   x000D    display  inline-flex  x000D    align-items  center  x000D    x000D   x000D   Radio--large   x000D    font-size  2rem  x000D    x000D   x000D   Radio-Input   x000D    margin  0 0 5rem 0  x000D    x000D   lt div gt  x000D     lt label class  Radio  for  sex-female  gt  x000D       lt input class  Radio-Input  type  radio  id  sex-female  name  sex  value  female    gt  x000D      Female x000D     lt  label gt  x000D   x000D     lt label class  Radio  for  sex-male  gt  x000D       lt input class  Radio-Input  type  radio  id  sex-male  name  sex  value  male    gt  x000D      Male x000D     lt  label gt  x000D   lt  div gt  x000D   x000D   x000D   lt div gt  x000D     lt label class  Radio Radio--large  for  sex-female2  gt  x000D       lt input class  Radio-Input  type  radio  id  sex-female2  name  sex  value  female    gt  x000D      Female x000D     lt  label gt  x000D   x000D     lt label class  Radio Radio--large  for  sex-male2  gt  x000D       lt input class  Radio-Input  type  radio  id  sex-male2  name  sex  value  male    gt  x000D      Male x000D     lt  label gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

there are several way  one i would prefer is using a table in html  you can add two coloum three rows table and place the radio buttons and lable    lt table border  0  gt    lt tr gt     lt td gt  lt input type  radio  name  sex  value  1  gt  lt  td gt     lt td gt radio1 lt  td gt    lt  tr gt   lt tr gt     lt td gt  lt input type  radio  name  sex  value  2  gt  lt  td gt     lt td gt radio2 lt  td gt    lt  tr gt   lt  table gt

User · Answer

Try this   input type  radio       margin-top  -1px    vertical-align  middle

User · Answer

input       display  table-cell      vertical-align  middle     Put class for all radio  This will work for all radio button on the html page    Fiddle

User · Answer

I know I d selected the anwer by menuka devinda but looking at the comments below it I concurred and tried to come up with a better solution  I managed to come up with this and in my opinion it s a much more elegant solution   input type  radio    label         vertical-align  baseline      padding  10px      margin  10px       Thanks to everyone who offered an answer  your answer didn t go unnoticed  If you still got any other ideas feel free to add your own answer to this question

User · Answer

label  input       vertical-align  middle      I m just align the vertical midpoint of the boxes with the baseline of the parent box plus half the x-height  en wikipedia org wiki X-height  of the parent

User · Answer

I like putting the inputs inside the labels  added bonus  now you don t need the for attribute on the label   and put vertical-align  middle on the input    x000D   x000D  label  gt  input type radio    x000D      vertical-align  middle  x000D      margin-top  -2px  x000D    x000D   x000D   d2     x000D      font-size  30px  x000D    x000D   lt div gt  x000D    lt label gt  lt input type  radio  name  radio  value  1  gt Good lt  label gt  x000D    lt label gt  lt input type  radio  name  radio  value  2  gt Excellent lt  label gt  x000D   lt div gt  x000D   lt br gt  x000D   lt div id  d2  gt  x000D    lt label gt  lt input type  radio  name  radio2  value  1  gt Good lt  label gt  x000D    lt label gt  lt input type  radio  name  radio2  value  2  gt Excellent lt  label gt  x000D   lt div gt  x000D   x000D   x000D     The -2px margin-top is a matter of taste    Another option I really like is using a table   Hold your pitch forks  It s really nice   It does mean you need to add the for attribute to all your labels and ids to your inputs  I d recommended this option for labels with long text content  over multiple lines    x000D   x000D   lt table gt  lt tr gt  lt td gt  x000D       lt input id  radioOption  name  radioOption  type  radio    gt  x000D       lt  td gt  lt td gt  x000D       lt label for  radioOption  gt                       x000D          Really good option x000D       lt  label gt  x000D   lt  td gt  lt  tr gt  lt  table gt  x000D   x000D   x000D

User · Answer

Adding display inline-block to the labels and giving them padding-top would fix this  I think  Also  just setting the line-height on the labels would also

[html] How to vertically align a html radio button to it's label?

Examples related to html

Examples related to css

Examples related to forms

Examples related to xhtml

Examples related to radio-button