text does not vertically align with image - html

Question

Good day, as the title says, I am having issues with aligning the text in the exact center of my image. I tried adding a class with the css vertical-align:middle with no effect. Also, I tried using the span class to surround the text that will be centered. Both the image and the text are encased in a bootstrap grid. Any help will be appreciated thank you.
HTML/Bootstrap:
<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

Considering you are using bootstrap4, you can achieve that using the class .align-items-center, or use display:flex as stated by others :)
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

I believe this produces what you ask for. It is using 2 flexboxes:
First one (.row) to put the image and text next to each other in a responsive way;
Second one (.col-md-9) to position the span in the center
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

You can aslo use align-self-center in column div class without any height of image and other css also add larger image no design change when you use align-self-center in column div no need set image height
.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>