【发布时间】：2018-01-29 13:17:26
【问题描述】：
我想知道如何垂直居中对齐文本和图片以创建这样的网站部分： 我想对齐该图片左侧的公司名称上的徽标和文本。我想将徽标置于其旁边的文本及其描述的中心。
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;
}
更新问题
非常感谢@WebDevBooster 提供以下解决方案。但是，我意识到我遇到的一些问题。尽管与下面发布的代码相似，但我进行了一些更改以准确反映我想要的内容，但是，它并没有以响应方式运行。为了简洁明了，我在列表中明确列出了这些问题：
-
随着浏览器窗口向移动设备尺寸缩小，列表变得非常狭窄，右侧的图片/视频项目变得非常小且不美观。我认为这部分是因为我无法将图片/视频项目放在右侧的列下方，所有项目符号点都允许列表项目向右扩展。
HTML：
<section id="about">
<div class="container">
<h3 class="font-weight-bold text-center">Discovering The Future.</h3>
<div class="row mt-4">
</div>
<div class="row">
<div class="col">
<div class="row">
<div class="col-auto">
<img src="https://picsum.photos/140/65" alt="" class="img-fluid testphoto">
</div>
<div class="col pt-3">
<h2>The Cao Lab</h2>
<h3 class="font-weight-bold pt-1 pb-3">April 2016 - Present</h3>
<ul>
<li class="pb-3">Employ alkene metathesis to produce porous molecules valuable for encapsulation and adsorption applications</li>
<li class="pb-3">Prepare analytical samples, preform characterization analysis, and interpret results for molecules of interest</li>
<li class="pb-3">Communicate research to others by attending conferences and poster presentations</li>
<li class="pb-5">Devised a cost-effective method to quantify hydrogen production during evolution experiments</li>
</ul>
</div>
<div class="col-sm-3 ">
<div class="embed-responsive embed-responsive-5by3 teensie">
<iframe class="embed-responsive-item youtube" src="https://www.youtube.com/embed/KPZ8HHRR1A0"></iframe></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="row">
<div class="col-auto">
<img src="https://picsum.photos/140/65" alt="" class="img-fluid testphoto">
</div>
<div class="col pt-3">
<h2>Institut Parisien de Chimie Moléculaire
</h2>
<p class="text-primary">National Science Foundation Internation REU Program.</p>
<h3 class="font-weight-bold pb-3">May 2017 - August 2017</h3>
<ul>
<li class="pb-3">Conduct study on the selective deprotection of perbenzylated a-cyclodextrin to access novel functionalization</li>
<li class="pb-3">Synthesize molecules suitable as ligands in metal-catalysis and for improving chiral HPLC discrimination ability</li>
<li class="pb-3">Prepare analytical samples, preform characterization analysis, and interpret data of cyclodextrin derivatives</li>
<li>Submitted abstract to present at the Chemical Education Division of the 255th ACS National Meeting</li>
</ul>
</div>
<div class="col-sm-3 ">
<img src="https://vignette.wikia.nocookie.net/rayman/images/c/cf/Teensy.png" alt="" class="img-fluid teensie2 ">
</div>
</div>
</div>
</div>
</div>
</section>
CSS：
.shift{
margin-left:20px;
}
.barbie{
list-style: none;
margin: 0;
padding: 0;
}
.barbieitem{
//text-align: right;
font-size: 1.3em;
}
.testphoto {
display: inline-block;
vertical-align:middle;
}
.joblist{
display: inline-block;
}
.labname{
display: inline-block;
vertical-align:middle;
border:solid black 1px;
}
.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%);
}
【问题讨论】：
标签： html css twitter-bootstrap bootstrap-4