How to align radio buttons and their labels?

Question

I'm working on the design of a form and have a section of radio buttons where a user identifies their relationship to the university (student, visitor, vendor, or other). For some reason, the labels are not inline with the radio buttons. This is what it looks like currently.

I've worked on this for a few hours and have tried a variety of things. I tried formatting the buttons and labels as a table so that the buttons and labels were in one table element, with all buttons in one row. I've tried manually changing the position of the label so that it's vertical alignment is centered with the button. I've also tried using the vertical-align css property and display: inline-grid to try to fix this. Also, my radio buttons are display-none and then overlapped with css to color them to match the form. I've also tried removing this when going through the above list, but am still not able to achieve this. Also, "row" and "bg" are classes used to style the margins and padding.

Here's the HTML:

 <div id="statusrow" class="row bg" style="width: 45%;">
      <div class="col-sm-3 color-text"><input id="vi" type="radio" value="Visitor" name="status"><label for="vi" style="font-weight:normal;">Visitor</label></div>
      <div class="col-sm-3 color-text"><input id="st" type="radio" value="Student" name="status"><label for="st" style="font-weight: normal;">Student</label></div>
      <div class="col-sm-3 color-text"><input id="ve" type="radio" value="Vendor" name="status"><label for="ve" style="font-weight: normal;">Vendor</label></div>
      <div class="col-sm-2 color-text"><input id="ot" type="radio" value="Other" name="status"><label for="ot" style="font-weight: normal;">Other</label></div>
    </div>

Answer 1

Thanks for the help! Here's what ended up working for me:

  <div id="statusrow" class="row bg" style="width: 55%;">
      <div class="col-sm-3 color-text"><label for="vi" style="font-weight: normal;">
        <input id="vi" type="radio" value="Visitor" name="status" style="vertical-align: baseline;">
        Visitor</label></div>
      <div class="col-sm-3 color-text"><label for="st" style="font-weight: normal;">
        <input id="st" type="radio" value="Student" name="status" style="vertical-align: baseline;">
        Student</label></div>
      <div class="col-sm-3 color-text"><label for="ve" style="font-weight: normal;">
        <input id="ve" type="radio" value="Vendor" name="status" style="vertical-align: baseline;">
        Vendor</label></div>
      <div class="col-sm-2 color-text"><label for="ot" style="font-weight: normal;">
        <input id="ot" type="radio" value="Other" name="status" style="vertical-align: baseline;">
        Other</label></div>
    </div>

Answer 2

Try something like this:

.color-text {
  text-align: center;
  width: 120px;
  display: inherit;
}
#statusrow{
  width: 100% !important;
  text-align: center;
  display: inline-block;
}
#statusrow input {
    text-align: center;
    display: block;
    margin: 0 auto;
}

<div id="statusrow" class="row bg" style="width: 45%;">
  <div class="col-sm-3 color-text"><input id="vi" type="radio" value="Visitor" name="status"><label for="vi" style="font-weight:normal;">Visitor</label></div>
  <div class="col-sm-3 color-text"><input id="st" type="radio" value="Student" name="status"><label for="st" style="font-weight: normal;">Student</label></div>
  <div class="col-sm-3 color-text"><input id="ve" type="radio" value="Vendor" name="status"><label for="ve" style="font-weight: normal;">Vendor</label></div>
  <div class="col-sm-2 color-text"><input id="ot" type="radio" value="Other" name="status"><label for="ot" style="font-weight: normal;">Other</label></div>
</div>

Here is the second version:

.color-text {
  text-align: center;
  width: 120px;
  display: inherit;
}
#statusrow{
  width: 100% !important;
  text-align: center;
  display: inline-block;
}
#statusrow input {
    text-align: center;
    display: block;
    margin: 0 auto;
}
    
#statusrow label{
  margin-left: -65px;
  position: relative;
  top: -17px;
}

<div id="statusrow" class="row bg" style="width: 45%;">
  <div class="col-sm-3 color-text"><input id="vi" type="radio" value="Visitor" name="status"><label for="vi" style="font-weight:normal;">Visitor</label></div>
  <div class="col-sm-3 color-text"><input id="st" type="radio" value="Student" name="status"><label for="st" style="font-weight: normal;">Student</label></div>
  <div class="col-sm-3 color-text"><input id="ve" type="radio" value="Vendor" name="status"><label for="ve" style="font-weight: normal;">Vendor</label></div>
  <div class="col-sm-2 color-text"><input id="ot" type="radio" value="Other" name="status"><label for="ot" style="font-weight: normal;">Other</label></div>
</div>

Answer 3

<div id="statusrow" class="row bg" style="width: 45%;">
  <div class="col-sm-3 color-text"><label class="Radio" for="vi" style="font-weight:normal;"><input class="Radio-Input" id="vi" type="radio" value="Visitor" name="status">Visitor</label></div>
  <div class="col-sm-3 color-text"><label class="Radio" for="st" style="font-weight: normal;"><input class="Radio-Input" id="st" type="radio" value="Student" name="status">Student</label></div>
  <div class="col-sm-3 color-text"><label class="Radio" for="ve" style="font-weight: normal;"><input class="Radio-Input" id="ve" type="radio" value="Vendor" name="status">Vendor</label></div>
  <div class="col-sm-2 color-text"><label class="Radio" for="ot" style="font-weight: normal;"><input class="Radio-Input" id="ot" type="radio" value="Other" name="status">Other</label></div>
</div>


<style>
  .Radio {
    display: inline-flex;
    align-items: center;
  }

  .Radio-Input {
    margin: 0 0.5rem 0;
  }
</style>

Please try the above changes you will get your required design..!!!

Answer 4

Did you tried the classic?

input[type="radio"] {
  margin-top: -1px;
  vertical-align: middle;
}

It's working here purely with what you shared. If this doesn't work it's some additional css that's causing the problem.