将图像垂直居中放置在多列容器中的文本Bootstrap 4？ [英] Vertically centering images to text in a multi-column container Bootstrap 4?

问题描述

我想知道如何垂直居中对齐文字和图片，以创建如下网站部分：这个想法是，徽标将叠加在公司名称上方（以较大大小来填满屏幕），并且ul右侧的图片/视频将堆叠在下面。 如果屏幕足够大（桌面），我想保持这个样子：

在移动视图中避免出现此情况：

HTML：

 < section id =about> 
< div class =container> 
 
< 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/65alt =class =img-fluid testphoto> 
< / div> 
< div class =col pt-3> 
< h2>曹实验室< / h2> 
< h3 class =font-weight-bold pt-1 pb-3> 2016年4月至今< / h3> 
< ul> 
< li class =pb-3>采用烯烃复分解反应产生对封装和吸附应用有价值的多孔分子< / li> 
 
准备分析样品，预制品表征分析，并解释目标分子的结果< / li> 
< li class =pb-3>通过出席会议和海报展示将研究传达给他人< / li> 
< li class =pb-5>设计了一种经济有效的方法来量化进化实验过程中的氢气产量< / li> 
< / ul> 
< / div> 
< div class =col-sm-3> 
 
< div class =嵌入式响应嵌入式响应-5by3 teensie> 
< iframe class =embed-responsive-item youtubesrc =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/65alt =class =img-fluid testphoto> 
< / div> 
< div class =col pt-3> 
< h2>巴黎化妆师学院Moléculaire
< / h2> 
< p class =text-primary>美国国家科学基金会国际REU计划。< / p> 
< h3 class =font-weight-bold pb-3> 2017年5月 -  2017年8月< / h3> 
< ul> 
< li class =pb-3>进行关于苄基化α-环糊精的选择性脱保护以获得新功能化的研究< / li> 
< li class =pb-3>在金属催化中合成适合作为配体的分子并用于改善手性HPLC分辨能力< / li>准备分析样品，预制品表征分析和解释环糊精衍生物的数据< / li>< / b> 
< li>将摘要提交至第255届ACS全国会议化学教育部门并提交< / li> 
< / ul> 
< / div> 
< div class =col-sm-3> 
< img src =https://vignette.wikia.nocookie.net/rayman/images/c/cf/Teensy.pngalt =class =img-fluid teensie2> 
< / div> 
< / div> 
 
< / div> 
 
< / div> 
 
< / div> 
 
< / section> 
  

CSS：

  .shift {
 margin-left：20px; 
} 
 
 .barbie {
 list-style：none; 
保证金：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：纯黑1px; 
} 
 
 .youtube {
最大宽度：300px; 
最大高度：300px; 
职位：相对！重要; 
 float：right; 
 
} 
 
 .teensie {
 top：50％; 
剩下：50％; 
 transform：translate（-50％， -  50％）; 
} 
 
 .teensie2 {
 position：relative; 
 top：50％; 
剩下：50％; 
 transform：translate（-50％， -  50％）; 
 
  

解决方案

+ h2元素）以及它们的相应列。 image列中给出了 col-auto 类来保持它的窄，而h2列给出了类 d-flex align-items-center 垂直居中放置物品。

下面是工作代码片段（点击下面的运行代码片段来测试）：

 < link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min。 cssintegrity =sha384-Gn5384xqQ1aoWXA + 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW / dAiS6JXmcrossorigin =anonymous>< section id =about> < div class =container> < div class =row mt-4> < div class =col-md-11> < h3 class =font-weight-bold text-right>发现未来。< / h3> < / DIV> < / DIV> < div class =row> < div class =col-md-9> < div class =row> < div class =col-auto> < img src =https://picsum.photos/140/65alt =class =img-fluid testphoto> < / DIV> < div class =col pt-3> < h2>曹实验室< / h2> < h3 class =font-weight-bold pt-1 pb-3> 2016年4月 - 至今< / 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/65alt =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> 2017年5月 -  2017年8月< / 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>  

I would like to know how I can vertically center align text and pictures to create a website section like this: I want align the logos and the text on the company names that are on the left of that picture. I would like to center the logos to the text next to it and their description.

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

UPDATED QUESTION

Thanks a lot to @WebDevBooster for providing the solution below. However, I have realized a few issues that I've encountered. Though similar to the code posted below, I made some changes to reflect exactly what I'd like, however, It does not act in a responsive manner. In efforts to be concise and clear, i have bulleted the issues explicitly in a list:

1. As the browser window shrinks towards mobile sizes, the list becomes really narrow, and the picture/video items on the right become really small and aesthetically unpleasing. I think this is partially due to the fact that I am unable to get the picture/video items on the right move below the column with all of the bullet points to allow the list items to expand out more to the right.

   2. I'd like all elements to take up full width (width the default padding of course) of the screen as the site becomes smaller. Essentially this means that the right-most column containing the video player and the cartoon would move below the entry to its left. Something like this sort of (this is a style from another part of my site): the idea being that the logo will stack above the company name (at a larger size to fill up the screen), and the picture/video on the right of the ul will stack below.

   3. I want to keep this look if the screen is large enough (desktop):

while avoiding this in mobile view:

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

解决方案

I nested both items (image + h2 element) in a row and their corresponding columns. The image column is given the col-auto class to keep it narrow and the h2 column is given the classes d-flex align-items-center to vertically center the items inside.

Here's the working code snippet (click "run code snippet" below to test):

<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？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！