对齐跨度右对齐和垂直头部左

Question

我想对齐跨度格的权利，跨度为一个按钮中。

我已成功地做到以上，但我有问题垂直的同时对准头部维持到左边。

.spec-li>li>span {
  padding: 5px 0 0 0;
}

.spec-label {
  display: block;
  float: left;
  width: 50%;
  font-weight: 700;
  font-size: 12px;
}

.spec-value {
  display: block;
  float: right;
  width: 50%;
  text-align: right;
  font-size: 12px;
}

.card-header-spec {
  display: flex;
  justify-content: space-between
}

.card-spec-button-font-size {
  font-size: 30px
}

.spec-card {
  border-width: 0;
  border-top-width: 1px;
  background-color: none;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<section>
  <div class="accordion" id="accordionWeight">
    <div class="card spec-card">
      <div class="card-header card-header-spec" id="headingOne">
        <h5 class="mb-0">Weight</h5>
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                            <span class="card-spec-button-font-size">+</span>
                                        </button>
      </div>

      <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionWeight">
        <div class="card-body">
          <ul class="list-unstyled spec-li">
            <li>
              <span class="spec-label">Base Weight</span>
              <span class="spec-value">2351 lbs (1064kg)</span>
            </li>
            <li>
              <span class="spec-label">Useful Load</span>
              <span class="spec-value">1249 lbs (569kg)</span>
            </li>
            <li>
              <span class="spec-label">Cabin payload with 3 hr trip fuel and 45 min reserve</span>
              <span class="spec-value">895 lbs (409 kg)</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

我重视的是目前的样子截图：qazxsw POI

任何人都可以帮助解决这个问题，因为这将是非常赞赏

Answer 1

如果你想在中心垂直对齐。做这个。

h5

当你在代码aboe看到，卡头，SPAC，H5的母公司，是

.card-header-spec {
    display: flex;
    justify-content: space-between;
}

。在引导-4，您使用flex对齐柔性元素的含量垂直于它的中心。

align-items-center

---

如果你想定制

    .spec-li>li>span {
      padding: 5px 0 0 0;
    }

    .spec-label {
      display: block;
      float: left;
      width: 50%;
      font-weight: 700;
      font-size: 12px;
    }

    .spec-value {
      display: block;
      float: right;
      width: 50%;
      text-align: right;
      font-size: 12px;
    }

    .card-header-spec {
      display: flex;
      justify-content: space-between
    }

    .card-spec-button-font-size {
      font-size: 30px
    }

    .spec-card {
      border-width: 0;
      border-top-width: 1px;
      background-color: none;
    }

使用，使用CSS为align-items: center类。

card-header-spec

Answer 2

在CSS中，以垂直对齐，加

.card-header-spec {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

内align-items: center。

下面是修改后的CSS

card-header-spec

Answer 3

尝试使用

.spec-li>li>span {
  padding: 5px 0 0 0;
}

.spec-label {
  display: block;
  float: left;
  width: 50%;
  font-weight: 700;
  font-size: 12px;
}

.spec-value {
  display: block;
  float: right;
  width: 50%;
  text-align: right;
  font-size: 12px;
}

.card-header-spec {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-spec-button-font-size {
  font-size: 30px
}

.spec-card {
  border-width: 0;
  border-top-width: 1px;
  background-color: none;
}

，请访问：vertical-align property