Question

我有这个html：

 <div class="tab-pane active" id="product1">
       <div class="card">
          <div class="card-img-top d-flex align-items-center">
             <img class="img-fluid" src="http://via.placeholder.com/150x150/1f1a38/ffffff?text=Image">
             <div class="card-body">
                <p class="card-text">Hello World</p>
                <p></p>
             </div>
          </div>
       </div>
    </div>

我成功地在同一行中添加了图像和文本，但是有一个问题：左侧的图像显示在垂直中心，我想要垂直在顶部，我该怎么做？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="tab-pane active" id="product1">
   <div class="card">
      <div class="card-img-top d-flex align-items-center">
         <img class="img-fluid" src="http://via.placeholder.com/150x150/1f1a38/ffffff?text=Image">
         <div class="card-body">
            <p class="card-text">Hello World. Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum</p>
            <p></p>
         </div>
      </div>
   </div>
</div>

Answer 1

由于父级为align-items-center类，因此图像位于垂直中心。最简单的解决方案是在图像中添加align-self-start类，该类将位于顶部。

您应该检查代码，因为card-body位于card-img-top内部。在LINK处查看文档，您会发现card-img-top通常用于在卡的顶部放置图像。卡身通常直接放置在卡内。如果使用媒体对象怎么办？看看这个LINK

顺便说一下，有一个稳定的Bootstrap版本，最新版本是4.2.1。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="tab-pane active" id="product1">
   <div class="card">
      <div class="card-img-top d-flex align-items-center">
         <img class="img-fluid align-self-start" src="http://via.placeholder.com/150x150/1f1a38/ffffff?text=Image">
         <div class="card-body">
            <p class="card-text">Hello World. Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum</p>
            <p></p>
         </div>
      </div>
   </div>
</div>

如何设置图像到顶部？

1 个答案: