如何实现非表格布局下文本与上方对应项的居中对齐？

要让value1、value2、value3和上方的Item 2、Item 3、Item 4精准居中对齐，核心是让每一组对应的上下元素拥有相同的宽度占比，并在各自的区域内居中。结合你使用的Bootstrap框架，这里提供两种适配场景的方案：

方案一：利用Bootstrap网格系统（最省心） #

Bootstrap的row和col天然适配类表格布局，我们可以把每一行的元素分割成等宽列，再让列内文本居中：

修改后的完整HTML代码：

<div class="card">
  <div class="card-header d-flex justify-content-between">
    <span class="font-weight-bold">Title</span>
  </div>
  <div class="card_body">
    <ul class="list-group list-group-flush">
      <!-- 表头行 -->
      <li class="list-group-item">
        <div class="row">
          <div class="col-3 text-center">
            <span class="text-heading-blue font-size-sm font-weight-semi-bold">Item 1</span>
          </div>
          <div class="col-3 text-center">
            <span class="text-heading-blue font-size-sm font-weight-semi-bold">Item 2</span>
          </div>
          <div class="col-3 text-center">
            <span class="text-heading-blue font-size-sm font-weight-semi-bold">Item 3</span>
          </div>
          <div class="col-3 text-center">
            <span class="text-heading-blue font-size-sm font-weight-semi-bold">Item 4</span>
          </div>
        </div>
      </li>
      <!-- 内容行 -->
      <li class="list-group-item">
        <div class="row">
          <div class="col-3 text-center">
            <span class="font-size-sm">Description type</span>
          </div>
          <div class="col-3 text-center">
            <span class="font-size-sm">value1</span>
          </div>
          <div class="col-3 text-center">
            <span class="font-size-sm">value2</span>
          </div>
          <div class="col-3 text-center">
            <span class="font-size-sm">value3</span>
          </div>
        </div>
      </li>
      <!-- 单独行 -->
      <li class="list-group-item d-flex align-items-center justify-content-between">
        <div>
          <span class="font-weight-semi-bold text-heading-blue">Description</span>
        </div>
        <span class="font-weight-bold font-size-lg text-heading-blue">value</span>
      </li>
    </ul>
  </div>
</div>

原理说明： #

• row会将容器宽度分成12等份，col-3让每个列占3份（刚好适配4个元素），确保上下行对应列宽度完全一致。
• text-center让列内文本居中，从视觉上实现精准对齐。

方案二：自定义Flex布局（更灵活） #

如果不想依赖Bootstrap网格，也可以用原生Flex属性实现，强制每个元素平分宽度并居中：

首先添加自定义CSS：

.flex-col {
  flex: 1; /* 让每个元素平分容器宽度 */
  text-align: center; /* 文本居中 */
}

然后修改HTML结构：

<div class="card">
  <div class="card-header d-flex justify-content-between">
    <span class="font-weight-bold">Title</span>
  </div>
  <div class="card_body">
    <ul class="list-group list-group-flush">
      <!-- 表头行 -->
      <li class="list-group-item d-flex">
        <span class="text-heading-blue font-size-sm font-weight-semi-bold flex-col">Item 1</span>
        <span class="text-heading-blue font-size-sm font-weight-semi-bold flex-col">Item 2</span>
        <span class="text-heading-blue font-size-sm font-weight-semi-bold flex-col">Item 3</span>
        <span class="text-heading-blue font-size-sm font-weight-semi-bold flex-col">Item 4</span>
      </li>
      <!-- 内容行 -->
      <li class="list-group-item d-flex">
        <span class="font-size-sm flex-col">Description type</span>
        <span class="font-size-sm flex-col">value1</span>
        <span class="font-size-sm flex-col">value2</span>
        <span class="font-size-sm flex-col">value3</span>
      </li>
      <!-- 单独行 -->
      <li class="list-group-item d-flex align-items-center justify-content-between">
        <div>
          <span class="font-weight-semi-bold text-heading-blue">Description</span>
        </div>
        <span class="font-weight-bold font-size-lg text-heading-blue">value</span>
      </li>
    </ul>
  </div>
</div>

原理说明： #

• 给li设置d-flex启用Flex布局，flex:1让所有子元素平分容器宽度，避免因内容长短导致的宽度差异。
• text-align:center直接解决你之前遇到的内容右侧偏移问题，让文本在自己的宽度区域内居中。

补充说明： #

你之前用的justify-content-between之所以会错位，是因为这个属性是让元素紧贴容器两端、中间元素均匀分布，但元素宽度由自身内容决定，内容长短不一就会导致上下对齐错位。而上面两种方案都是强制每个元素占相同宽度，从根源上解决了对齐问题。

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