如何调整CSS实现包含单选框的div容器垂直对齐且整体居中

没问题！我来帮你调整CSS，实现所有单选按钮垂直对齐、每组整体居中的效果。结合你的HTML结构，这里是具体的修改方案：

/* 让每个表单组内的单选选项整体居中 */
.form-group {
  text-align: center;
  margin-bottom: 1.5rem; /* 可选：给各组之间添点垂直间距，视觉更舒适 */
}

/* 调整单选容器的布局，确保按钮和标签垂直对齐 */
.radio.inline {
  display: inline-flex;
  align-items: center; /* 核心：让单选按钮和标签在垂直方向居中对齐 */
  margin: 0 1.2rem; /* 给每个单选选项之间加水平间距，避免拥挤 */
}

/* 微调按钮和标签的间距，优化细节 */
.radio.inline input[type="radio"] {
  margin-right: 0.6rem;
}

关键逻辑说明 #

• 给.form-group加text-align: center：能让里面的所有行内/行内块元素（也就是你的.radio.inline容器）整体居中显示，完美实现你要的组居中效果。
• 用inline-flex布局.radio.inline：配合align-items: center，不管标签文本的高度是多少（比如你那个长一点的“TextText”标签），单选按钮和标签都能稳稳垂直对齐，解决了之前可能出现的错位问题。
• 添上margin：纯粹是为了提升可读性，让选项之间的间距更合理，不会挤成一团。

小提醒 #

如果你的原有CSS里给.radio.inline设置过float或者display: inline-block这类可能冲突的属性，记得把它们去掉，不然flex布局的效果可能会打折扣哦～

试试这个样式，你就能得到想要的效果啦：每组单选按钮居中排列，所有按钮和对应的标签都整齐垂直对齐！

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