如何让id为info的div从row行的中心位置开始对齐？

不需要依赖margin或者额外的条件判断，你可以通过Flexbox 分栏布局或者Bootstrap网格系统来实现需求，确保所有行的info容器都从行的中心位置开始对齐，结构统一无需区分带按钮/不带按钮的行：

方案1：基于Bootstrap网格系统推荐 #

利用Bootstrap的row和col自动平分宽度，左边列放单选按钮和图片并右对齐内容，右边列自然从行的中心开始：

<div class="row align-items-center" id="row">
  <!-- 左侧容器：占1/2宽度，内容右对齐 -->
  <div class="col d-flex align-items-center justify-content-end">
    <div class="radio-btn"></div>
    <div style="margin-left: 2em; margin-right: 2em; width: 50px;">
      <img src='xy.png' style="max-width: 100%; max-height: 100%;">
    </div>
  </div>
  <!-- 右侧info容器：从行中心开始 -->
  <div class="col" id="info">
    <div> SAMPLE TEXT </div>
    <div><button>SELECT PICKUP</button></div>
  </div>
</div>

方案2：纯Flexbox实现无需Bootstrap网格 #

给父容器平分空间，左侧容器占1/2宽度并右对齐内容，右侧info容器占剩余1/2宽度，自动从中心开始：

<div class="d-flex align-items-center" id="row">
  <!-- 左侧容器：占1/2宽度，内容右对齐 -->
  <div class="d-flex align-items-center justify-content-end" style="flex: 1;">
    <div class="radio-btn"></div>
    <div style="margin-left: 2em; margin-right: 2em; width: 50px;">
      <img src='xy.png' style="max-width: 100%; max-height: 100%;">
    </div>
  </div>
  <!-- 右侧info容器：从行中心开始 -->
  <div id="info" style="flex: 1;">
    <div> SAMPLE TEXT </div>
    <div><button>SELECT PICKUP</button></div>
  </div>
</div>

两种方案都能让info的左边缘精准对齐到行的垂直中线，循环生成多行时结构完全一致，不需要额外的条件判断来调整样式。

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