如何水平对齐两个嵌套在父div中的子div？

DevOps 小满

2026-7-6

解决方案

要实现「Spin count/History标签与对应值水平对齐」的效果，核心是调整HTML结构，让每一组标签与值处于同一行容器，再配合CSS布局实现精准对齐。以下是具体实现步骤：

1. 重构HTML结构

把原来的两个独立大div拆分成两组「标签-值」对，每组用容器包裹，确保每一行的标签和值一一对应：

<div id="stat">
  <div class="stat-row">
    <span class="stat-label">Spin count:</span>
    <span id="spin-count-value">0</span>
  </div>
  <div class="stat-row">
    <span class="stat-label">History:</span>
    <span id="history-value"></span>
  </div>
</div>

2. 配置CSS布局

用Flex布局实现行内元素的水平对齐，同时保留你需要的样式：

#stat {
  margin-top: 30px;
  background-color: black;
  padding: 10px; /* 避免内容贴容器边缘 */
}

.stat-row {
  display: flex;
  justify-content: center; /* 整行内容居中 */
  align-items: center;
  gap: 8px; /* 标签与值的间距 */
  margin-bottom: 5px; /* 两行之间的垂直间距 */
}

.stat-label, #spin-count-value, #history-value {
  font-size: 16px;
  color: white;
}

3. 调整JavaScript逻辑

现在需要分别更新两个值的内容，不再把所有值塞到同一个div里：

// 假设spinCount和history是已定义的变量
let spinCount = 0;
let history = [];

function updateStatusLabel() {
  // 更新Spin count数值
  document.getElementById('spin-count-value').textContent = spinCount;
  // 更新History内容
  document.getElementById('history-value').textContent = history.join(', ');
}

// 示例：表格点击触发逻辑（根据你的实际场景调整）
document.querySelectorAll('table td').forEach(cell => {
  cell.addEventListener('click', () => {
    const clickedNum = cell.textContent;
    history.push(clickedNum);
    spinCount++;
    updateStatusLabel();
  });
});