如何在已居中元素旁对齐另一div，实现按钮组居中、spinner居右？

可以通过嵌套Flex布局来满足需求，既保证Button 1a和Button 2a整体居中，又能让Spinner固定在按钮组右侧。以下是两种实现方案：

方案一：重构HTML结构（推荐） #

修改后的HTML #

<div class="outer-container">
  <div class="button-group">
    <button class="button">Button 1a</button>
    <button class="button">Button 2a</button>
  </div>
  <div class="spinner">
    <p>my spinner</p>
  </div>
</div>

对应CSS #

/* 外层容器：将按钮组与Spinner作为整体水平居中 */
.outer-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem; /* 控制按钮组与Spinner的间距 */
}

/* 按钮组容器：让两个按钮横向排列并保持内部对齐 */
.button-group {
  display: flex;
  gap: 1rem; /* 控制两个按钮之间的间距 */
}

/* 按钮基础样式（可根据需求调整） */
.button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
}

/* Spinner样式（可根据需求调整） */
.spinner {
  color: #666;
}

方案二：基于原HTML结构调整 #

如果不想大幅修改原有HTML结构，可以调整容器层级和样式：

修改后的HTML #

<div class="main-container">
  <div class="button-wrapper">
    <div class="col-2-button">
      <button class="button">Button 1a</button>
    </div>
    <div class="flex-container">
      <button class="button">Button 2a</button>
    </div>
  </div>
  <div class="col-2-spinner">
    <p>my spinner</p>
  </div>
</div>

对应CSS #

/* 外层容器：将按钮组与Spinner整体居中 */
.main-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

/* 按钮组容器：让两个按钮横向排列 */
.button-wrapper {
  display: flex;
  gap: 1rem;
}

/* 保留原有按钮样式 */
.button {
  /* 你的按钮原有样式 */
}

核心思路 #

• 外层容器使用display: flex + justify-content: center，确保按钮组与Spinner的整体在页面水平居中；
• 内层按钮组容器同样使用Flex布局，让两个按钮横向排列，保证按钮组本身的结构整齐；
• gap属性用于控制元素间的间距，避免使用margin带来的布局问题。

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