如何让自定义复选框旁文本始终垂直居中？兼容旧版HTML/CSS

Hey there! Let's get that checkbox and text aligned perfectly, even when the checkbox is checked. The core issue here is a combination of how custom form inputs render, unaccounted-for border sizes, and default inline element alignment behavior—all easy fixes without needing modern flexbox features.

Here's what we need to adjust:

• Force consistent box sizing: Your checkbox has a 2px border, which adds to its total height/width (making it 26px instead of 22px). We'll use box-sizing: border-box to ensure the declared height and width include borders and padding.
• Align inline elements properly: Inline/inline-block elements like your input and span default to baseline alignment. Setting vertical-align: middle will make them center against each other.
• Clean up conflicting CSS properties: You had duplicate line-height values on the .checkboxBig class—we'll remove the conflicting one to avoid unexpected rendering.
• Tweak the checked state pseudo-element: Ensure the checkmark doesn't throw off the alignment by matching its vertical positioning to the checkbox.

Modified CSS Code #

.lvl1Name { 
  line-height: 22px; 
  height: 22px; 
  font-size: 22px;
  vertical-align: middle; /* Add this to align with checkbox */
}

.checkboxBig { 
  -webkit-appearance: none; 
  width: 22px; 
  height: 22px; 
  font-size: 22px; 
  background: white; 
  border-radius: 0px; 
  border: 2px solid #144b68; 
  padding-left: 1px; 
  text-align: center;
  box-sizing: border-box; /* Include border in declared size */
  vertical-align: middle; /* Align midpoint with span */
  line-height: 18px; /* Center checkmark without overflow */
}

.checkboxBig:hover { 
  background: #80AED1; 
}

.checkboxBig:checked { 
  background: #DAE5EB; 
}

.checkboxBig:checked:after { 
  content: "\2713"; 
  font-size: 22px; 
  color: #144b68;
  line-height: 18px; /* Match checkbox line-height for alignment */
}

.checkboxBig:checked:hover { 
  background: #80AED1; 
}

Modified HTML (no changes needed, included for context) #

<div>
<input class="checkboxBig" type="checkbox">
<span class="lvl1Name">Testing</span>
</div>

Why This Works: #

1. box-sizing: border-box ensures your checkbox stays exactly 22px tall/wide, even with the 2px border—matching the span's dimensions perfectly.
2. vertical-align: middle tells both the input and span to align their midpoints, eliminating the shift between checked/unchecked states.
3. Adjusting the line-height on the checkbox and its pseudo-element keeps the checkmark centered inside the box without pushing the element's height beyond 22px.

This should resolve the alignment inconsistency you're seeing, all using CSS features that work in older browsers (no flexbox required!).

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