How to vertically align a HTML radio button to its label?

Aligning with flexbox - because sometimes you have to flex

Make use of the flexbox model for making sure your radio buttons and labels are always box-office hits.

HTML:

<div class="radio-container">
  <input type="radio" id="option1" name="options">
  <label for="option1">Option 1</label>
</div>


CSS:

.radio-container {
  display: inline-flex; /* The Flex McCartney of CSS */
  align-items: center; /* Align those runaways in the center */
}


The .radio-container is the shared stage where the input and label align to strike the perfect pose.

Adjusting with margins & padding - a nudge there, a shove here

To get your alignment picture perfect, you might need the help of margin-top or padding. We won't judge:

CSS:

input[type="radio"] {
  margin-top: -1px; /* To push or not to push... */
}


Use this CSS trick when the alignment needs some mechanical fine-tuning.

Talk the language of HTML and CSS - accessibility and organization

Promote accessibility and good form habits. Keep an eye on your for attribute; it's not just for decoration!

HTML:

<label for="html">HTML</label>
<input type="radio" id="html" name="tech">


Also, consider wrapping your radio buttons and labels with a div. It's like a neat folder holding your stuff.

Style class - when you need a dash of elan

Classes offer a better alternative to inline styles, giving you a cleaner HTML and manageable CSS.

CSS:

.radio-button {
  /* Your input changes its suit here */
}
.label {
  /* Your label gets its glam here */
}


Style with caution! And do some cross-browser testing - you might be in for some surprises!

When looking good matters: Styling

Level up your UI game by crafting stylish radio buttons purely with CSS. Here's a little sneak peek:

CSS:

.radio-button {
  appearance: none;
  /* Dress code: Business Casual */
}

.radio-button:checked {
  /* Dress code: Black tie */
}
