文字与图片不垂直对齐

Question

早上好，正如标题所述，将文本与图像的确切中心对齐时遇到问题。我试图添加一个类与CSS Vertical-align：middle无效。另外，我尝试使用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>

CSS：

.align_text {
  vertical-align: middle;
}

Answer 1

考虑到您正在使用bootstrap4，可以使用类.align-items-center或使用display:flex来实现这一点，如其他人所述：）

img {
  background: gray;
  height: 250px;
  display: block;
  max-width: 100%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row align-items-center">
    <div class="col-3">
      <img src="img/mission-mywhitecard.jpg" class="img-responsive align_text">
    </div>
    <div class="col-9 justify_text">
      <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>
    </div>
  </div>
</div>

Answer 2

我相信这会满足您的要求。它使用2个flexbox：

1. 第一个（.row）以响应方式将图像和文本彼此相邻；
2. 第二个（.col-md-9）将跨度放置在中心

html,
body {
  width: 100%;
}

.row {
  display: flex;
  width: 100%;
}

.row>* {
  flex: 1; /* Allow the flex items to grow and shrink */
}

.col-md-9 {
  display: flex;
  justify-content: center;
  align-items: center;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-md-3">
      <img src="https://via.placeholder.com/100x300" class="img-responsive align_text">
    </div>
    <div class="col-md-9">
      <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>

Answer 3

您也可以在列div类中使用align-self-center而没有任何图像高度，而其他CSS也可以在列div中使用align-self-center时添加更大的图像而无需更改设计

.align_text {
  vertical-align: middle;
}
img {
  max-width: 100%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container-fluid">
      <div class="row">
          <div class="col-md-3">
            <img src="http://placekitten.com/1000/500" class="img-responsive align_text">
          </div>
          <div class="col-md-9 justify_text align-self-center">
            <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>