Question

我想知道如何垂直居中对齐文字和图片以创建一个这样的网站部分：我想对齐该图片左侧公司名称上的徽标和文字。我想将徽标集中在旁边的文本及其描述中。

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提供以下解决方案。但是，我已经意识到我遇到的一些问题。虽然类似于下面发布的代码，但我做了一些修改以准确反映我喜欢的内容，但是，它并没有以敏感的方式行事。为了简明扼要，我在列表中明确地提出了问题：

随着浏览器窗口向移动尺寸缩小，列表变得非常狭窄，右侧的图片/视频项目变得非常小而且美观上令人不悦。我认为这部分是由于我无法使用所有子弹点在列下方右侧移动图片/视频项目以允许列表项向右扩展。
1. 当网站变小时，我希望所有元素占据屏幕的全宽（当然是默认填充的宽度）。从本质上讲，这意味着包含视频播放器和卡通片的最右侧列将移动到其左侧的条目下方。像这样的东西（这是来自我网站另一部分的一种风格）：这个想法是徽标将堆叠在公司名称之上（以更大的尺寸填满屏幕），以及图片ul右侧的/ video将叠加在下面。
2. 如果屏幕足够大（桌面），我想保持这种状态：

在移动视图中避免这种情况：

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%);
    }

Answer 1

我在一行中嵌套了两个项目（图像+ h2元素）及其相应的列。图像列被赋予col-auto类以使其保持狭窄，并且h2列被赋予类d-flex align-items-center以使项目内部垂直居中。

以下是工作代码段（点击下面的“运行代码段”进行测试）：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<section id="about">
    <div class="container">
        <div class="row mt-4">
            <div class="col-md-11">
                <h3 class="font-weight-bold text-right">Discovering The Future.</h3>
            </div>
        </div>
        <div class="row">
            <div class="col-md-9">
               <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">Lorem ipsum dolor sit amet, consectetur adipisicing elit, consectetur adipisicing elit.</li>
                           <li class="pb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, consectetur adipisicing elit.</li>
                           <li class="pb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, consectetur adipisicing elit.</li>
                           <li class="pb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit, consectetur adipisicing elit.</li>
                       </ul>
                   </div>
               </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-9">
                <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</h2>
                        <p class="text-primary">National Blue text lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                        <h3 class="font-weight-bold pb-3">May 2017 - August 2017</h3>
                        <ul>
                            <li class="pb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, consectetur adipisicing elit.</li>
                            <li class="pb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, consectetur adipisicing elit.</li>
                            <li class="pb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, consectetur adipisicing elit.</li>
                            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, consectetur adipisicing elit.</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

将图像垂直居中到多列容器Bootstrap 4中的文本？

1 个答案: