将跨度向右对齐，并将标题垂直向左对齐

Question

我正在尝试将span对齐到div的右边，范围在按钮内。

我已经设法完成上述操作，但是在将标头垂直对齐的同时将它保持在左侧时遇到了问题。

.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>

我附上了它的当前外观的屏幕截图：

任何人都可以帮助解决这个问题，因为将不胜感激

Answer 1

在CSS中，要垂直对齐，请在align-items: center内添加card-header-spec。

下面是经过修改的CSS

.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;
}

Answer 2

如果要将h5垂直居中对齐。做这个。

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

如您在代码前面所看到的，h5的父级的card-header-spac为flex。在bootstrap-4中，您使用align-items-center将flex元素的内容在其中心垂直对齐。

    .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。

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

Answer 3

尝试使用vertical-align property，请访问：https://www.w3schools.com/cssref/pr_pos_vertical-align.asp