Html 文本与图像不垂直对齐

您好，正如标题所说，我在将文本对齐到图像中心时遇到了问题。我尝试添加一个css垂直对齐：中间的类，但没有效果。此外，我还尝试使用span类来围绕将居中的文本。图像和文本都封装在引导网格中。任何帮助都将不胜感激，谢谢

HTML/引导程序：

   <div class="container-fluid">
      <div class="row">
          <div class="col-md-3">
            <img src="img/mission-mywhitecard.jpg" class="img-responsive align_text">
          </div>
          <div class="col-md-9 justify_text">
            <span>
            <h2 class="med_bg">OUR MISSION</h2>
            <p class="mv_font">“To provide a mutually-beneficial platform for partners through high-quality, lower cost and friendly access to health, wellness and beauty.”</p>
            </span>
          </div>
      </div>
   </div>

---

我相信这能满足你的要求。它使用2个FlexBox：

第一个（.row）以响应方式将图像和文本相邻放置

第二个（.col-md-9）用于将跨度定位在中心

html，
身体{
宽度：100%；
}
.行{
显示器：flex；
宽度：100%；
}
.row>*{
flex:1；/*允许flex项增长和收缩*/
}
.col-md-9{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

我们的使命
“通过高质量、低成本和友好的健康、健康和美容服务，为合作伙伴提供一个互利的平台。”

考虑到您使用的是bootstrap4，您可以使用类

实现这一点。对齐项目中心

，或使用其他人所述的

显示：flex

）

img{
背景：灰色；
高度：250px；
显示：块；
最大宽度：100%；
}

我们的使命
“通过高质量、低成本和高质量的服务为合作伙伴提供一个互利的平台
友好地获得健康、健康和美丽。”

您也可以在column div类中使用align self center，而无需设置图像高度，其他css也可以添加更大的图像在column div中使用align self center时无需更改设计无需设置图像高度

.align\u文本{
垂直对齐：中间对齐；
}
img{
最大宽度：100%；
}

我们的使命
“通过高质量、低成本和友好的健康、健康和美容服务，为合作伙伴提供一个互利的平台。”

您使用什么

引导

版本？您使用的是哪个版本的BS？将块元素添加到内联元素是无效的，我指的是

h2

和

p

在

span

中，我使用的是bootstrap 4pretty simple with docs

https://getbootstrap.com/docs/4.1/utilities/flex/#align-项目

.align_text {
  vertical-align: middle;
}