如何在忽略行内其他元素的情况下将按钮居中对齐？

核心问题是要把按钮和文本div的布局上下文拆分，避免浏览器将二者视为整体居中。以下是两种无需表格的简洁方案：

方案1：Flex布局+绝对定位（适合文本需自由定位的场景） #

给每个按钮行容器设置相对定位，让按钮通过Flex居中，文本div脱离文档流独立放置：

HTML结构 #

<div class="button-row">
  <button>操作按钮1</button>
  <div class="text-label">提示文本1</div>
</div>
<div class="button-row">
  <button>操作按钮2</button>
  <div class="text-label">提示文本2</div>
</div>

CSS代码 #

.button-row {
  position: relative;
  display: flex;
  justify-content: center; /* 让按钮水平居中，形成垂直列 */
  margin: 12px 0; /* 控制按钮行之间的间距 */
}

.text-label {
  position: absolute;
  left: 20px; /* 文本固定在左侧，可根据需求调整为right */
  top: 0; /* 自定义文本垂直位置，无需和按钮对齐 */
}

方案2：Grid布局（语义化更强，适合固定布局结构） #

通过Grid将按钮和文本分配到不同列，按钮固定在中间列实现居中：

CSS代码 #

.button-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* 三列布局，中间列自适应按钮宽度 */
  margin: 12px 0;
}

.button-row button {
  grid-column: 2; /* 按钮放在中间列，自动水平居中 */
}

.text-label {
  grid-column: 1; /* 文本放在左列，可改为3放在右列 */
  justify-self: start; /* 文本左对齐，可按需调整 */
}

原理说明 #

之前的尝试无效，是因为按钮和文本div默认属于行内/行内块元素，浏览器会将它们作为一个整体处理。通过上述方案，要么让文本脱离文档流不影响按钮布局，要么通过Grid将二者分到独立布局轨道，从而实现按钮单独垂直对齐成列，文本自由放置的需求。

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