vertical-align属性失效：复选框与文本无法垂直对齐求助

Hey there! I’ve run into this exact alignment headache before—let’s get that checkbox sitting neatly next to your text. The issue here stems from combining zoom: 1.5 (a non-standard scaling property) with the large font-size on your label, which throws off the browser’s calculation of vertical-align: middle.

Here are three solid solutions, ordered by how reliable and future-proof they are:

1. Use Flexbox (Most Recommended) #

Flexbox eliminates alignment guesswork entirely by letting the container handle vertical centering. This works across all modern browsers and doesn’t break no matter how you scale elements or adjust fonts:

.form-check-input:checked+span {
  text-decoration: line-through;
}

.form-check-label {
  font-size: 2em;
  display: flex;
  align-items: center; /* This centers all child elements vertically */
  gap: 0.5rem; /* Adds consistent spacing between checkbox and text */
}

.form-check-input {
  transform: scale(1.5); /* Replace non-standard zoom with CSS transform */
}

Clean up your HTML by removing inline styles:

<div class="container alert-info alert">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox">
    <span>Text</span>
  </label>
</div>

2. Replace zoom with transform: scale() #

If you don’t want to switch to flexbox, swapping zoom for the standard transform: scale() will make vertical-align behave predictably. We’ll adjust the transform origin to keep the checkbox from shifting too far right:

.form-check-input:checked+span {
  text-decoration: line-through;
}

.form-check-label {
  font-size: 2em;
}

.form-check-input {
  vertical-align: middle;
  transform: scale(1.5);
  transform-origin: center left;
  margin-right: 0.5rem;
}

transform scales the element visually without altering its layout box, so the browser can calculate the baseline for vertical-align correctly.

3. Fine-Tune vertical-align for zoom #

If you absolutely need to keep zoom: 1.5, you can manually tweak the vertical-align value to compensate for the scaling. This is a bit hacky, but works for quick fixes:

.form-check-input:checked+span {
  text-decoration: line-through;
}

.form-check-label {
  font-size: 2em;
}

.form-check-input {
  vertical-align: -3px; /* Adjust this pixel value until it lines up perfectly */
  zoom: 1.5;
}

The exact value will depend on your font size and zoom level, so you’ll need to test it a little to get it right.

Why Your Original Code Failed #

zoom is an old IE-era property that scales the entire rendered element, but browsers still calculate vertical-align based on the element’s original, un-scaled size. Pair that with a 2em font size (which increases the line height), and the "middle" alignment gets completely thrown off.

内容的提问来源于stack exchange，提问作者Witnes