#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>
Ответ №2:
Вы можете использовать style=»text-align:center»