PC端Chrome元素对齐正常，移动端Chrome却无法对齐的问题

问题根源 #

原生复选框与行内文本的默认垂直对齐规则在移动端Chrome中存在差异，再加上固定高度的容器限制了垂直空间，导致布局错乱。

修改方案 #

通过Flex布局统一控制元素对齐，并调整容器空间规则，具体代码如下：

修改后的HTML（推荐使用语义化label标签）

<!DOCTYPE html>
<head>
  <title>Align Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="utf-8">
  <link rel="stylesheet" href="/css/alignment.test.css">
</head>
<body>
  <div class="page_Container">
    <div class="center_Wrapper">
      <div class="agree_to_Information_Wrap">
        <input type="checkbox" class="agree_to_Info_Checkbox" id="agreeCheckbox" value="Yes" required>
        <label class="agree_to_Information_Text" for="agreeCheckbox">I Agree to all of the above information.</label>
      </div>
    </div>
  </div>   
</body>
</html>

修改后的CSS

body{
  margin: 0;
  display: flex;
}

.page_Container {
  width: 100%;
  max-width: 1080px;
  margin: auto;
  position: relative;
}

.agree_to_Information_Wrap {
  width: 100%;
  background-color: #000000;
  padding: 8px 5px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.agree_to_Info_Checkbox {
  width: 16px;
  height: 16px;
}

.agree_to_Information_Text {
  font-family: sans-serif;
  font-size: 12pt;
  color: #ffffff;
  flex: 1;
}

关键调整说明 #

1. Flex布局对齐：给容器添加display: flex和align-items: center，确保复选框与文本始终垂直居中，彻底解决跨端对齐差异。
2. 移除固定高度：用上下padding替代固定height，避免内容因移动端字体或元素尺寸变化被截断。
3. 间距控制优化：用gap属性替代文本的margin-left，更直观地控制复选框与文本的间距。
4. 统一复选框样式：设置固定宽高，消除不同浏览器对原生复选框的默认样式差异。

若需保留原<a>标签，只需将代码中的<label>改回<a>即可，对齐逻辑不受影响。

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