如何将一行按钮转为网格布局，实现上下两行按钮居中对齐效果

你可以按如下方式调整HTML结构和CSS代码： #

调整后的CSS代码 #

/* 外层总容器，控制整体居中 */
.btn-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px; /* 控制大小按钮两行之间的间距，可按需调整 */
  width: 100%;
}
/* 单一行按钮的容器 */
.btn-row {
  display: flex;
  gap: 40px; /* 控制同个行内按钮之间的间距，和你原设置的margin效果一致 */
}
.guzik {
  background-color: white;
  padding: 0 2px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  border: 1px solid black;
}
.guzik1 {
  background-color:white;
  padding: 0;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  border: 1px solid black;
  font-size: 9px;
}

调整后的HTML代码 #

<div class="btn-wrap">
  <!-- 小按钮单独放在一个容器，要隐藏直接给这个div加display: none即可 -->
  <div class="btn-row small-btn-row">
    <input name="1" type="button" class="guzik1" id="k 0+1" />
    <input name="2" type="button" class="guzik1" id="k 0+2" />
    <input name="3" type="button" class="guzik1" id="k 0+3" />
    <input name="4" type="button" class="guzik1" id="k 0+4" />
  </div>
  <div class="btn-row big-btn-row">
    <input name="Color1" type="button" class="guzik" id="0+1" onclick="changeColor1(id)" />
    <input name="Color2" type="button" class="guzik" id="0+2" onclick="changeColor1(id)" />
    <input name="Color3" type="button" class="guzik" id="0+3" onclick="changeColor1(id)" />
    <input name="Color4" type="button" class="guzik" id="0+4" onclick="changeColor1(id)" />
  </div>
</div>

调整说明 #

• 拆分了按钮层级：大小按钮分别放在独立的行容器中，满足你单独控制小按钮显隐的需求，不需要单独修改四个小按钮的参数，直接操作.small-btn-row的显示属性即可。
• 采用flex布局实现对齐：外层容器纵向排列，整体在页面居中；每行内部横向均匀排列按钮，自然实现上下两行按钮一一对应对齐的效果。
• 移除了按钮原本的margin属性，改用父容器的gap控制间距，避免margin重叠导致的布局偏移问题。

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