html - 图像不在较大的卡片 div 中居中

Question

图像不会在我的卡片上居中。如果我将容器变小，它们在 PC 上看起来很好(居中)，但在响应时它们会恢复到更大的尺寸并保持对齐。无论容器大小如何，我都希望卡片容器中的图像居中。

我已经尝试将 display:inline-block 更改为 display:block 和 class="text center"以及 .mx-auto，但似乎没有任何效果。这是整个页面的链接 http://www.wisbechinlinespeed.co.uk/committee-test.htm

.row .heading .heading-icon {
  display: block;
}

.committee-card .card:hover {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  border: 0;
}

.committee-card .card {
  float: left;
  width: 100%;
  background: #fff;
  padding: 30px 20px;
  text-align: center;
  border: 2px solid #d5d5d5;
  margin: 0 0 28px;
}

.committee-card .card figure {
  width: 148px;
  height: 148px;
  border-radius: 100%;
  display: inline-block;
  margin-bottom: 15px;
}

.committee-card .card img {
  width: 148px;
  height: 148px;
  border-radius: 100%;
  display: inline-block;
}

<section class="committee-card padding-lg">
  <div class="containera">
<ul class="row">
  <li class="col-12 col-md-6 col-lg-3">
    <div class="card equal-height" style="height: 349px;">
      <figure>
        <img src="committee/001.jpg" class="img-responsive" alt="" />
      </figure>

      <h1>Richard Garwell</h1>
      <br />
      <p>Trustee and Track Committee Member</p>
    </div>
  </li>

  <li class="col-12 col-md-6 col-lg-3">
    <div class="card equal-height" style="height: 349px;">
      <figure>
        <img src="committee/002.jpg" class="img-responsive" alt="" />
      </figure>

      <h1>Glen Brown</h1>
      <br />
      <p>Trustee and Chairman</p>
    </div>
  </li>

  <li class="col-12 col-md-6 col-lg-3">
    <div class="card equal-height" style="height: 349px;">
      <figure>
        <img src="committee/003.jpg" class="img-responsive" alt="" />
      </figure>
    </div>
  </li>
</ul>
  </div>
</section>

Answer 1

stackoverflow 说我不允许发布图片，所以你必须点击下面的链接查看说明

这是你想要的吗？

enter image description here

我在你的代码中看到了 flexbox:

enter image description here

那么，为什么不直接将 align-items: center; 添加到整个容器。

enter image description here