Inquiring on how to achieve vertical center alignment of text and images for a website section similar to the one shown in this image: https://i.sstatic.net/s8gNh.jpg. The intention is to align the logos and the corresponding text of company names situated on the left side of the image. The goal is to center the logos alongside their descriptive text.
HTML:
<div class="jarallax" data-jarallax-video="https://www.youtube.com/watch?v=v3Fie3AFMrA">
<div class="overlay subSection container-fluid">
<div class="row justify-content-center">
<div class="overlay-cell clearfix">
<div class="col-sm-12">
<h1 class="display-2 ">Research</h1>
</div>
</div>
</div>
</div>
</div>
<section id="about">
<h5 class="text-center pb-3">Discovering The Future.</h5>
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="row">
<div class="col-2">
<img src="assets/caolab.png" width="75" height="75" alt="" class="img-fluid testphoto">
</div>
<div class="col d-flex align-items-center">
<h2>The Cao Lab</h2>
<h3>April 2016 – Present</h3>April 2016 – Present
</div>
<div class="col-md-5 offset-2">
</div>
</div>
</div>
</div>
</div>
</section>
CSS:
.testphoto {
display: inline-block;
vertical-align:middle;
}
.labname{
display: inline-block;
vertical-align:middle;
border:solid black 1px;
}
.shift{
margin-left:20px;
}
.barbie{
list-style: none;
margin: 0;
padding: 0;
}
.barbieitem{
//text-align: right;
font-size: 1.3em;
}
.joblist{
display: inline-block;
}
.youtube {
max-width: 300px;
max-height: 300px;
position: relative !important;
float: right;
}
.teensie{
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}
.teensie2{
position: relative;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}