Изображения не центрированы в карте большего размера

Question

Изображения не будут в центре моих карт.Если я уменьшу контейнеры, они будут хорошо смотреться на ПК (по центру), но при отзыве они возвращаются к большему размеру и выравниваются по левому краю.Я хотел бы, чтобы изображения в контейнерах для карточек центрировались независимо от размера контейнера.

Я попытался изменить отображение: inline-block для отображения: block и class = "text center", а также .mx-авто но ничего вроде не работает.Вот ссылка на всю страницу 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

Вы можете просто удалить ширину в .committee-card .card figure, и изображение будет соответствовать выравниванию, установленному в .committee-card .card

Answer 2

Используйте align-items-center для карточек.

Bootstrap card ´s flex-direction равно column.Следовательно, вам нужно использовать align-items-center.В противном случае вы бы использовали justify-content-center.

<div class="card align-items-center" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Answer 3

stackoverflow говорит, что я не могу публиковать изображения, поэтому вы должны нажать на ссылку ниже, чтобы просмотреть инструкции

Это то, что вы хотите, чтобы это было?

введите описание изображения здесь

Я видел flexbox в вашем коде:

введите описание изображения здесь

Так почемуРазве вы не просто добавляете align-items: center; ко всему вашему контейнеру.

введите описание изображения здесь