Bootstrap卡片头像与用户名对齐及卡片整体居中实现问题咨询

修复方案 #

1. 头像与用户名垂直居中 #

给包裹头像和用户名的flex容器新增align-items-center类，该类是Bootstrap内置的交叉轴居中工具类，添加后即可实现二者垂直方向居中对齐，用户名也会自然紧靠在头像右侧。

2. 卡片水平居中 #

你为卡片设置了固定宽度width: 50rem，但未配置水平居中规则，给.card元素新增mx-auto类即可实现卡片在父容器内水平居中。同时建议将固定宽度修改为max-width: 50rem，避免小屏设备下卡片宽度超出视口导致内容溢出。

修改后的完整代码如下：

<div class="row">
    <div class="col-md-8 mx-auto">
      {% for post in posts %}
      <div class="card m-2 mx-auto" style="max-width: 50rem;">
         <div class="card-title d-flex flex-row align-items-center 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 }}" alt="Card image cap">
         <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>

内容的提问来源于stack exchange，提问作者Ahmed