如何在Bootstrap的row中实现图片与文本居中对齐？

你当前代码里的row justify-content-center仅能让列在水平方向上居中排列，但列内部的图片、标题和段落并未设置居中对齐。可以通过以下两种方式解决：

方法一：使用Bootstrap内置类（无需额外CSS） #

直接给包含内容的title-text容器添加text-center类，同时给图片添加d-block mx-auto类确保图片本身也居中（图片默认是行内元素，该类能让它在列内水平居中，尤其适合图片宽度不满列宽的场景）：

<section id="features">
  <div class="row justify-content-center">
    <div class="col-md-4 col-sm-12 title-text text-center">
      <img src="images/feature1.png" alt="feature1" class="d-block mx-auto">
      <h3 class="features-title">Food Listing.</h3>
      <p class="features-prgrph">Quickly and easily post information about food you want to share.</p>
    </div>
    <div class="col-md-4 col-sm-12 title-text text-center">
      <img src="images/feature2.png" alt="feature2" class="d-block mx-auto">
      <h3 class="features-title">Matchmaking</h3>
      <p class="features-prgrph">Find people in your area looking for food.</p>
    </div>
    <div class="col-md-4 col-sm-12 title-text text-center">
      <img src="images/feature3.png" alt="feature3" class="d-block mx-auto">
      <h3 class="features-title">Request System.</h3>
      <p class="features-prgrph">Request food from other users with a few taps.</p>
    </div>
  </div>
</section>

方法二：自定义CSS样式 #

如果不想依赖Bootstrap内置类，也可以给title-text类添加自定义样式，让内部所有元素居中：

.title-text {
  text-align: center;
}
.title-text img {
  display: block;
  margin: 0 auto; /* 让图片在容器内水平居中 */
}

修改后，每个列内的图片、标题和段落都会实现水平居中对齐，达到你想要的效果。

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