如何使用CSS调整Side 1与Side 4复选框的定位布局

实现方案 #

你可以通过修改布局样式快速达到预期效果，操作如下：

1. 先修正原代码中一处无效样式：原包裹Side2、图片、Side3的div设置的display: inlineblock是错误写法，正确属性值应为带短横线的inline-block，这里我们直接用弹性布局更方便对齐。
2. 添加对应CSS规则：

/* 给包裹所有墙面选项的外层div添加布局 */
.calculator > div:nth-of-type(1) {
  display: flex;
  align-items: center;
  gap: 15px;
}
/* 中间图片和对应复选框组布局 */
.calculator > div:nth-of-type(1) > div {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

如果不想用nth-of-type选择器，也可以给对应的div自定义class后替换选择器即可。修改后Side1、Side4会自动和中间图片水平对齐，所有控件垂直居中，完全匹配预期效果。

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