Совместите изображение с отзывчивым текстом bootstrap - PullRequest
Новая
       82

Совместите изображение с отзывчивым текстом bootstrap

0 голосов
/ 12 апреля 2020

У меня есть следующий код для моего изображения и текста. Однако, когда я уменьшаю размер экрана, текст не остается на одной линии с изображением слева. Есть ли способ исправить это? 

.media-body {
  text-align: center;
  padding-top: 200px;
}

@media (min-width: 544px) {
  .mt-0 {
    font-size: 16px;
  }
}

/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) {
  .mt-0 {
    font-size: 30px;
  }
}

/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) {
  .mt-0 {
    font-size: 40px;
  }
}
  
/* Extra large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {
  .mt-0 {
    font-size: 48px;
  }
}
<div class="media">
  <div class="pic1">
    <img src="images/mountain.jpg" class="align-self-start mr-3 img-fluid" height="400px" width="500px">
  </div>
  <div class="media-body">
    <h5 class="mt-0">Weekend in the Mountains</h5>
  </div>
</div>

1 Ответ

0 голосов
/ 13 апреля 2020

В Bootstrap 4 вы можете использовать d-flex. При этом мы можем удалить padding-top: 200px; и просто добавить d-flex align-items-center к <div class="media">

Вот пример с содержимым, вертикально выровненным по центру независимо от размера экрана: https://www.codeply.com/p/pyQF9H2qvG

...