在卡片中的图像旁边制作名称，将卡片居中

Posted 2023-03-21

【中文标题】在卡片中的图像旁边制作名称，将卡片居中

【英文标题】：Make Name next to image in card , center a card

【发布时间】：2022-01-06 20:01:03

【问题描述】：

请教两个问题：

如何将名称放在图像旁边。如您所见，单词位于卡片的顶部，而不是图像的中心 此外，卡片也没有按照应有的方式居中。

html

<div class="row">
    <div class="col-md-8 mx-auto">
      % for post in posts %
      <div class="card m-2" style="width: 50rem;">
         <div class="card-title d-flex flex-row  mb-0">
            <img class="rounded-circle article-img m-2" src=" post.user.profile.picture.url " />
            <a class="text-decoration-none text-dark " href="% url 'profile' post.user.profile.pk %">
               <h6>post.user.username</h6>
            </a>
         </div>
         <img class="card-img-body" src=" post.image.url " >
         <div class="card-body d-flex flex-row m-0 p-0 pt-1"> 
            <a class="card-title text-decoration-none text-dark" href="% url 'profile' post.user.profile.pk %">
               <h6 class="m-1">post.user.username </h6>
            </a>
         <p class="card-text m-0.9"> post.caption</p>

         </div>
         <div class="m-0 p-0 pt-1">
            <h6 class="m-1">Comments:</h6>
         </div>
         % for comment in post.comments.all  %
         <div class="card-body d-flex flex-row m-0 p-0 pt-1">
         <a class="card-title text-decoration-none text-dark m-0" href="% url 'profile' comment.user.profile.pk %">
         <h6 class="m-1">comment.user.username </h6>
         </a>  
         <p class="card-text m-0.9"> comment.text</p>
         </div>
      % endfor %

            <div class="float-right">
            <a href="% url 'add-comment' post.id %" class="btn btn-outline-primary right m-1 ">Add Comment</a>
            </div>

      </div>

      % endfor %
    </div>
</div>

【参考方案1】：

根据this answer，要并排获得两个Bootstrap 元素，您需要在一个.row 中嵌套两个.col div。

虽然您将它们嵌套在单行 <div class="row"> 中，但您也将它们嵌套在单列 <div class="col-md-8 mx-auto"> 中。您应该创建另一个 <div class="col-md-8 mx-auto"> 列，如下所示 (source)：

<div class="container">
  <div class="row">
    <div class="col-md-8">
      Column for Name
    </div>
    <div class="col-md-8">
      Column for Image
    </div>
  </div>
</div>

对于第二个问题，您可以使用 CSS 将 margin:auto !important div 包含在卡片中。