技术求助：如何实现机器人腿部在身体区域居中显示？

问题根源 #

你给.left_leg和.right_leg设置了固定的margin-left值（分别为45px和30px），这会强制让腿部整体向右偏移，直接抵消了.lower_body容器中justify-content: center的居中布局效果。虽然.lower_body已经配置了flex居中，但手动添加的margin破坏了flex布局的自动居中逻辑。

解决步骤 #

1. 移除.left_leg和.right_leg的margin-left属性
2. 在.lower_body中添加gap: 30px（可根据需求调整间距大小），通过flex的gap属性控制两条腿之间的距离，既能保持腿部间距，又能让整体在容器中居中。

修改后的CSS关键代码 #

.lower_body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 130px;
  margin: 30px auto 0px;
  gap: 30px; /* 新增：控制腿部间距 */
}

.left_leg,
.right_leg {
  width: 40px;
  height: 120px;
  border-radius: 0 0 100px 100px;
}

.left_leg:hover {
  transform: rotate(20deg);
}

.right_leg:hover {
  transform: rotate(-20deg);
}

修改后，腿部会自动在身体下方居中显示，同时保持两条腿之间的合理间距。

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