Блог

Главная - Вопросы по программированию - Как отцентрировать загрузочную карту изображения по вертикали с фиксированной высотой

Как отцентрировать загрузочную карту изображения по вертикали с фиксированной высотой

#bootstrap-4

#bootstrap-4

Вопрос:

Как я могу отцентрировать изображение по вертикали на загрузочной карте фиксированной высоты?

Я пробовал играть с классами mx-auto и justify-content-center, но это не работает.

Codeply:http://codeply.com/go/tXCgay8UDX

 <div class="card mx-auto mb-2" style="width: 12rem;">
    <div class="" style="height:200px;">
      <img class="card-img-top" src="https://www.fillmurray.com/200/100" alt="Card image cap">
    </div>
  <div class="card-body">
    <p class="card-text">Verticall center this image</p>
  </div>
</div>

Изображение должно быть введено в карточку вертикально.

Ответ №1:

Вы бы заставили контейнер изображения отображать: сгибать с помощью d-flex и затем align-items-center …

 <div class="card mx-auto mb-2" style="width: 12rem;">
    <div class="d-flex align-items-center" style="height:200px;">
      <img class="card-img-top" src="https://www.fillmurray.com/200/100" alt="Card image cap">
    </div>
  <div class="card-body">
    <p class="card-text">Verticall center this image</p>
  </div>
</div>

https://www.codeply.com/go/ZVK6JIaECD

Ответ №2:

Вы можете использовать style=»text-align:center»