将图像与响应式文本引导程序对齐答案

【问题标题】：Align image with responsive text bootstrap将图像与响应式文本引导程序对齐
【发布时间】：2020-07-24 14:40:54
【问题描述】：

我的图像和文本有以下代码。但是，当我减小屏幕尺寸时，文本不会与左侧的图像保持一致。有没有办法解决这个问题？

.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>

【问题讨论】：

标签： image twitter-bootstrap responsive text-alignment

【解决方案1】：

在 Bootstrap 4 中，您可以使用 d-flex。有了这个，我们可以删除padding-top: 200px; 并简单地将d-flex align-items-center 添加到<div class="media">

这是一个无论屏幕尺寸如何，内容都垂直居中对齐的示例：https://www.codeply.com/p/pyQF9H2qvG

【讨论】：