Bootstrap布局下实现两个Div顶部对齐、第三个Div垂直居中于目标Div的方法

我来帮你调整代码实现想要的布局效果～咱们先梳理下原代码的问题：原布局里的inline-flex和Bootstrap的col类组合导致对齐逻辑混乱，而且绿框和红框没有被放在一个能实现垂直居中的容器内，所以达不到预期效果。

下面是修改后的完整代码，我会同步解释每一步的改动：

修改后的HTML代码 #

<div class="col-lg-8 col-md-8 col-xs-12 d-flex align-items-start">
  <!-- 专门包裹绿框和红框的容器，用来实现绿框垂直居中于红框 -->
  <div class="d-flex align-items-center">
    <div class="col-1 div-container-product-images showbordergreen">
      <div class="div-product-images-list">
        @foreach(var item in Model.Images) {
          <div class="mt-2 d-block"><img src="~/@item" width="70" height="70" /></div>
        }
      </div>
    </div>
    <div class="col-6 text-center showborderred">
      <img src="~/@Model.Images.FirstOrDefault()" width="200" height="300" style="padding: 10px;" />
    </div>
  </div>
  <!-- 蓝框，和左边的绿红容器保持顶部对齐 -->
  <div class="col-4 showborderblue">
    Title
  </div>
</div>

修改后的CSS代码 #

/* 移除原有的inline-flex属性，因为现在依托flex容器布局，不需要这个属性 */
.div-container-product-images {
  /* display: inline-flex; 删掉这行 */
  vertical-align: middle; /* 这个属性也可以删掉，因为flex布局会处理对齐 */
}
.div-product-images-list{
  margin: auto;
}
.showborderred {
  border: 2px solid red;
}
.showborderblue {
  border: 2px solid blue;
}
.showbordergreen {
  border: 2px solid green;
}

关键改动说明 #

• 父容器添加d-flex align-items-start：把父容器转为flex布局，同时让所有直接子元素（左边的绿红组合容器、右边的蓝框）默认顶部对齐，这就实现了红框和蓝框顶部对齐的核心需求。
• 新增绿红组合容器并添加d-flex align-items-center：这个容器也是flex布局，让内部的绿框和红框在垂直方向上居中对齐，这样绿框就会自动垂直居中于红框的整体高度。
• 移除冗余属性：删掉绿框原有的display: inline-flex和vertical-align: middle，避免和flex容器的对齐逻辑冲突，让布局更简洁可控。

如果需要调整元素之间的间距，可以给绿红组合容器或者蓝框添加Bootstrap的间距类，比如mx-3（左右间距）、my-2（上下间距）来优化视觉效果。

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