图像未在较大的存储卡格中居中

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

Answer 2

您只需删除.committee-card .card figure中的宽度，图像将遵循您在.committee-card .card中设置的对齐方式

Answer 3

将align-items-center用于卡片。

引导card的{​​{1}}是flex-direction。因此，您需要使用column。否则，您将使用align-items-center。

justify-content-center