Bootstrap 4：在row类容器中居中图片并设置两侧文本块

看起来你想要的是在.row容器里让图片居中显示，同时左右两侧各放置一个文本块。你当前的代码是将页面分成了两个等宽列，通过调整order来切换位置，但这和目标布局不符。我来帮你修改实现：

修改后的完整代码 #

<section class="showcase">
  <div class="container-fluid p-0">
    <div class="row no-gutters align-items-center">
      <!-- 左侧文本块 -->
      <div class="col-lg-3 showcase-text">
        <h2>左侧文本标题</h2>
        <p class="lead">这里是左侧文本的内容，可以根据需求调整样式和文字</p>
      </div>
      <!-- 居中图片块 -->
      <div class="col-lg-6 showcase-img" style="background-image: url('img/bg-showcase-1.jpg'); min-height: 400px;"></div>
      <!-- 右侧文本块 -->
      <div class="col-lg-3 showcase-text">
        <h2>右侧文本标题</h2>
        <p class="lead">这里是右侧文本的内容，可以根据需求调整样式和文字</p>
      </div>
    </div>
  </div>
</section>

关键调整说明 #

• 栅格列分配：用col-lg-3给左右文本块分配宽度，中间图片块用col-lg-6，这样在大屏幕上总宽度刚好占满12列（3+6+3），实现图片居中、两侧文本的布局。
• 垂直居中对齐：给.row添加align-items-center类，确保图片和文本块在垂直方向上居中对齐，避免出现上下错位的情况。
• 背景图高度控制：给.showcase-img添加min-height样式，避免背景图因为没有内容而无法显示，你可以根据实际需求调整这个高度值。
• 移除不必要的order类：因为现在是按左-中-右的顺序排列，不需要用order-lg-*来调整顺序了；如果需要在小屏幕上改变排列顺序（比如让图片排在最上面），可以给图片列添加order-first类。

额外样式优化（可选） #

如果需要让文本块也垂直居中，或者调整间距，可以添加自定义CSS：

.showcase-text {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 400px;
}

.showcase-img {
  background-size: cover;
  background-position: center;
}

这样就能完美实现你想要的“row容器内居中图片，左右各放文本块”的效果啦！

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