卡片之间的角度引导中心文本答案

【问题标题】：Angular bootstrap center text between card卡片之间的角度引导中心文本
【发布时间】：2021-07-22 03:44:01
【问题描述】：

我在列中显示我的 div。问题是我需要将文本居中

我的代码

            <div class="card mb-4">
              <div class="card-header">
                <div class="card-title-wrap bar-info">
                  <div class="card-title">Personal Information</div>
                </div>
              </div>
              <div class="card-body">
                <div class="card-block">
                  <div class="align-self-center halfway-fab text-center">
                    <a class="profile-image">
                      <img src="assets/img/portrait/medium/avatar-m-9.jpg"
                        class="rounded-circle img-border gradient-summer width-100" alt="Card image">
                    </a>
                  </div>
                  <div class="text-center">
                    <span class="font-medium-2 text-uppercase">{{selectedPatient?.patientName}}</span>
                    <p class="grey font-small-2"></p>
                  </div>
                  <div class="row align-self-center">
                    <div class="col-12 col-sm-6">
                      <ul class="no-list-style pl-0 text-center">
                        <li class="mb-2">
                          <div class="d-flex align-items-center">
                            <div class="d-inline-block">
                              <span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
                                  ID: </a></span>
                            </div>
                            <div class="d-inline-block">
                              <span class="">
                                <span class="display-block overflow-hidden">
                                  &nbsp;&nbsp;{{selectedPatient?.mrn}}</span>

                              </span>
                            </div>
                          </div>
                        </li>

                      </ul>
                    </div>
                    <div class="col-12 col-sm-6">
                      <ul class="no-list-style pl-0 text-center">
                        <li class="mb-2">
                          <div class="d-flex align-items-center">
                            <div class="d-inline-block">
                              <span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
                                  Age:</a></span>
                            </div>
                            <div class="d-inline-block">
                              <span class="">
                                <span
                                  class="display-block overflow-hidden">&nbsp;&nbsp;{{selectedPatient?.age}}</span>

                              </span>
                            </div>
                          </div>
                        </li>
                        <li class="mb-2">

                      </ul>
                    </div>

                  </div>
                </div>
              </div>
            </div>

现在是这个样子

我需要将 ID 和 AGE 文本置于卡片中心。它们现在显示在左侧，我需要将它们显示在中间。我尝试给文本对齐中心，但它不在中心

【问题讨论】：

标签： css angular bootstrap-4

【解决方案1】：

.centered {
    width: 100%;
    display: flex;
    justify-content: center;
}

将您的项目放在包含该类的 div 中。

【讨论】：

【解决方案2】：

试试这个。我删除了一些没有意义的额外 html 代码。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>


<div class="card mb-4">
              <div class="card-header">
                <div class="card-title-wrap bar-info">
                  <div class="card-title">Personal Information</div>
                </div>
              </div>
              <div class="card-body">
                <div class="card-block">
                  <div class="align-self-center halfway-fab text-center">
                    <a class="profile-image">
                      <img src="assets/img/portrait/medium/avatar-m-9.jpg"
                        class="rounded-circle img-border gradient-summer width-100" alt="Card image">
                    </a>
                  </div>
                  <div class="text-center">
                    <span class="font-medium-2 text-uppercase">{{selectedPatient?.patientName}}</span>
                    
                  </div>
                  <div class="row align-self-center justify-content-center">
                    <div class="p-2 ">
                        <span class="text-primary font-weight-bold">ID:</span>
                         <span>{{selectedPatient?.mrn}}</span>
                    </div>
                    <div class="p-2 ">
                        <span class="text-primary font-weight-bold">Age:</span> 
                        <span>{{selectedPatient?.age}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

【讨论】：