html - 将进度条移动到选项卡的中心

Question

最近我正在为我的导航选项卡实现一个进度条。我创建了一个 div 并在其上添加了 css。但是，它看起来像这样:

如何将进度条移到选项卡的中央？

.wizard-step p {
    margin-top: 10px;
}

.wizard-step button[disabled] {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}

.wizard-row:before {
    top: 14px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 1px;
    background-color: #ccc;
}

.btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 16px;
}

.wizard-step {
    display: table-cell;
    text-align: center;
    position: relative;
}

.nav-link {
    margin: auto
}

#progressbar {
    border-radius: 10px;
    height: 7px;
    background-color: orange;
    width: 80%;
    margin: 0 auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div id="formWizard" class="wizard">
    <div id="progressbar"></div>
    <ul class="nav justify-content-center nav-justified">
        <li class="nav-item wizard-step">
            <a id="tab_start" type="button" class="nav-link active btn btn-primary btn-circle" href="#tabs-1" data-toggle="tab" role="tab" aria-controls="step1" title="Step 1">1</a>
            <p class="hidden-sm-down">Start report</p>
        </li>
        <li class="nav-item wizard-step">
            <a id="tab_report" type="button" class="nav-link disabled btn btn-primary btn-circle" href="#tabs-2" data-toggle="tab" role="tab" aria-controls="step2" title="Step 2">2</a>
            <p>Report payroll</p>
        </li>
        <li class="nav-item wizard-step">
            <a id="tab_review" type="button" class="nav-link disabled btn btn-primary btn-circle" href="#tabs-3" data-toggle="tab" role="tab" aria-controls="step3" title="Step 3">3</a>
            <p>Review and submit</p>
        </li>
        <li class="nav-item wizard-step">
            <a id="tab_confirm" type="button" class="nav-link disabled btn btn-primary btn-circle" href="#tabs-4" data-toggle="tab" role="tab" aria-controls="step4" title="Step 4">4</a>
            <p>Print confirmation</p>
        </li>
        <li class="nav-item wizard-step">
            <a id="tab_pay" type="button" class="nav-link disabled btn btn-primary btn-circle" href="#tabs-5" data-toggle="tab" role="tab" aria-controls="step5" title="Step 5">5</a>
            <p>View balance or pay</p>
        </li>
    </ul>

我对 CSS 很陌生。有什么想法吗？

Answer 1

你可以给#progressbar设置position: relative，然后将它向下移动18.5px，也就是的一半.btn-circle 的 height + 自身 height 的一半:

.wizard-step p {
  margin-top: 10px;
}

.wizard-step button[disabled] {
  opacity: 1 !important;
  filter: alpha(opacity=100) !important;
}

.wizard-row:before {
  top: 14px;
  bottom: 0;
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #ccc;
}

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 16px;
}

.wizard-step {
  display: table-cell;
  text-align: center;
  position: relative;
}

.nav-link {
  margin: auto
}

#progressbar {
  border-radius: 10px;
  height: 7px;
  background-color: orange;
  width: 80%;
  margin: 0 auto;
  position: relative; /* positioned relative to its normal position */
  top: 18.5px; /* moved down by 18.5px */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

<div id="formWizard" class="wizard">
  <div id="progressbar"></div>
  <ul class="nav justify-content-center nav-justified">
    <li class="nav-item wizard-step">
      <a id="tab_start" type="button" class="nav-link active btn btn-primary btn-circle" href="#tabs-1" data-toggle="tab" role="tab" aria-controls="step1" title="Step 1">1</a>
      <p class="hidden-sm-down">Start report</p>
    </li>
    <li class="nav-item wizard-step">
      <a id="tab_report" type="button" class="nav-link disabled btn btn-primary btn-circle" href="#tabs-2" data-toggle="tab" role="tab" aria-controls="step2" title="Step 2">2</a>
      <p>Report payroll</p>
    </li>
    <li class="nav-item wizard-step">
      <a id="tab_review" type="button" class="nav-link disabled btn btn-primary btn-circle" href="#tabs-3" data-toggle="tab" role="tab" aria-controls="step3" title="Step 3">3</a>
      <p>Review and submit</p>
    </li>
    <li class="nav-item wizard-step">
      <a id="tab_confirm" type="button" class="nav-link disabled btn btn-primary btn-circle" href="#tabs-4" data-toggle="tab" role="tab" aria-controls="step4" title="Step 4">4</a>
      <p>Print confirmation</p>
    </li>
    <li class="nav-item wizard-step">
      <a id="tab_pay" type="button" class="nav-link disabled btn btn-primary btn-circle" href="#tabs-5" data-toggle="tab" role="tab" aria-controls="step5" title="Step 5">5</a>
      <p>View balance or pay</p>
    </li>
  </ul>
</div>