将图标与 bootstrap 5 卡内的左侧对齐

Question

我在 bootstrap 5 中遇到了两个对齐问题：

1- 我想将我的图标与卡体的左边框对齐，但我正在努力弄清楚如何。

2- 如果我增加图标大小，我的卡片项目不会保持垂直对齐（下图）

基本上我试图垂直对齐我的箭头并与左边框对齐，所以如果我更改文本长度，它们会与其他行保持对齐。

    <div class="container-fluid">
      <div class="row ">
        <div class="col-lg-4 col-card-pricing">
          <!-- 1 month -->
          <div class="card my-auto card-pricing">
            <div class="card-body border-bottom-0">
              <i class="fas fa-dollar-sign fa-4x pricing-tag"></i>
              <h5 class="card-title"> Montly </h5>
              <h5 class="card-title">$ 1,00 </h5>
            </div>
            <ul class="list-group list-group-flush border-bottom-0 border-top-0">
              <li class="list-group-item border-bottom-0 pricing-item"> <i class="fas fa-arrow-right fa-1x arrow-item"></i>Chose one game </li>
              <li class="list-group-item border-bottom-0 pricing-item"> <i class="fas fa-arrow-right fa-1x arrow-item"></i>Detailed statistics</li>
            </ul>
            <a href="#" class="btn btn-dark btn-lg princing-button">Subscribe</a>
          </div>
        </div>
     </div>

.col-card-pricing {
  padding: 3% 4%;
}

.card-pricing {
  /* height: 500px; */
  transition-duration: .3s;
  border-radius: 5%;
  margin: 3% 0;
}

.card-pricing:hover {
  /* height: 500px; */
  transform: scale(1.15);
  border: 1px #F05454 solid;
}

/* .card-pricing:hover
.pricing-button {
  background-color: #F05454 !important;
} */

.princing-button {
  margin: 6% 15%;
  margin-bottom: 10%;
}

.pricing-item {
  font-size: 1.2Rem;
  margin: 5%;
  vertical-align: middle;
}
.arrow-item {
  /* padding-right: 150px; */
  /* text-align: left !important; */
}

.pricing-tag {
  padding: 8% 0;
  color: green;
}

Answer 1

   .list-group-item{
       position: relative;
    }

   .list-group-item i {
     position: absolute;
     left: 12px;
     top: 17px;
}

您可以简单地使用相对位置为 li 和绝对位置作为图标标签，您可以将箭头图标固定到左边框

那你可以试试flex

<li class="list-group-item border-bottom-0 pricing-item">
    <i class="fas fa-arrow-right fa-1x arrow-item"></i>
    <span>Chose one game</span>
</li>

.list-group-item{
    display: flex;
}
    
.list-group-item i {
    flex: 0 0 10%;
}
.list-group-item span{
    flex: 1;
    text-align: center;
}