在<li>中垂直对齐自定义单选框

<ul>
  <li>
    <input type="radio" id="option1" name="customRadio">
    <label for="option1">Option 1</label>
  </li>
  <li>
    <input type="radio" id="option2" name="customRadio">
    <label for="option2">Option 2</label>
  </li>
  <li>
    <input type="radio" id="option3" name="customRadio">
    <label for="option3">Option 3</label>
  </li>
</ul>

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  vertical-align: middle;
}

input[type="radio"] {
  display: none;
}

label {
  position: relative;
  display: inline-block;
  padding-left: 25px;
  cursor: pointer;
}

label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 1px solid #ccc;
  border-radius: 50%;
}

input[type="radio"]:checked + label::before {
  background-color: #0078D7;
}