html - 向右对齐 span 并垂直向左对齐 header

Question

我试图将跨度对齐到 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

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

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

正如您在代码 aboe 中看到的，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，请为 card-header-spec 类使用 align-items: center。

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