React项目中Checkbox与Label垂直居中对齐问题求助

你的问题核心是两个点：.container类的margin-bottom:12px把Checkbox往上偏移，导致Label看起来偏下；同时DOM结构和CSS样式存在冗余，影响了对齐效果。直接按下面的方式修改即可解决：

修改后的React组件代码 #

import React from "react";
import './checkbox.less';

interface ICheckBoxProps {
  label: string;
}

const Checkbox: React.FC<ICheckBoxProps> = ({ label }) => (
  <div className="checkbox-group">
    <input
      type="checkbox"
      id={label}
      className="checkbox-input"
    />     
    <label htmlFor={label} className="checkbox-label">{label}</label> 
  </div>
)

export default Checkbox;

修改后的LESS样式代码 #

.checkbox-group {
  display: inline-flex;
  align-items: center;
  gap: 8px; /* 可选：给Checkbox和Label之间添加间距，优化视觉效果 */
  cursor: pointer;
}

.checkbox-input {
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* 移除原有的margin-bottom，彻底解决垂直偏移问题 */
}

.checkbox-label {
  user-select: none;
  /* 无需额外设置display，flex容器的align-items:center会自动实现垂直居中 */
}

关键修改说明 #

1. 移除margin-bottom:12px：这是导致Checkbox向上偏移、Label看起来偏下的直接原因，删掉后就能消除核心错位。
2. 简化DOM结构：去掉多余的嵌套div，让flex容器直接包裹Checkbox和Label，减少层级干扰。
3. 清理冗余CSS：原.flex类里重复写了display:flex和display:inline-flex，保留inline-flex即可；同时利用flex的align-items:center天然实现垂直居中，无需额外的vertical-align属性。
4. 语义化类名：把container、label改成checkbox-input、checkbox-label，代码可读性更强，后续维护更方便。

如果遇到极端情况下的细微对齐偏差，可以给.checkbox-input加上vertical-align: middle，不过大部分场景下flex的居中已经足够稳定。

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