之前的绝对位置 - 垂直中心

Question

我正在尝试编写时间表。而我在伪元素垂直居中的那一刻停了下来。我已经尝试过更改 top: 0、translate、translateY、vertical-align 等。不幸的是，没有什么能正常工作。

.time {
  width: 2px;
  height: 100%;
  background-color: #cfcfcf;
  display: inline-block;
}

.steps {
  width: 80%;
  display: inline-block;
  margin-left: 40px;
  .step-description {
    border: 1px solid #000;
    background-color: #7f7f7f;
    border-radius: 0.25rem;
    &:before {
      content: url("https://image.ibb.co/gxZuTc/step.png");
      position: absolute;
      margin-left: -53px;
    }
  }
}

<div class="row mt-5 ml-5">
  <div class="col-lg-7">
    <div class="time"></div>
    <div class="steps">
      <div class="step-description">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur dolorem cum nostrum nihil quaerat, ut ducimus totam quae consectetur qui blanditiis voluptas ipsam magni quod. Debitis veritatis eligendi placeat, labore!</p>
      </div>

      <div class="step-description">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur dolorem cum nostrum nihil quaerat, ut ducimus totam quae consectetur qui blanditiis voluptas </p>
      </div>

      <div class="step-description">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur dolorem cum nostrum nihil quaerat, ut ducimus</p>
      </div>

      <div class="step-description">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur dolorem cum nostrum nihil quaerat, ut ducimus totam quae consectetur qui blanditiis voluptas ipsam magni quod. Debitis veritatis eligendi placeat, labore!</p>
      </div>
    </div>
  </div>
</div>

Answer 1

试试这个 CSS

.time {
  width: 2px;
  height: 100%;
  background-color: #cfcfcf;
  display: inline-block;
}

.steps {
  width: 80%;
  display: inline-block;
  margin-left: 40px;
  .step-description {
    border: 1px solid #000;
    background-color: #7f7f7f;
    position: relative;
    border-radius: 0.25rem;
      &:before {
        content: url("https://image.ibb.co/gxZuTc/step.png");
        position: absolute;
            top: 50%;
    transform: translateY(-50%);
      }
  }
}

Answer 2

试试这个：

.time {
  width: 2px;
  height: 100%;
  background-color: #cfcfcf;
  display: inline-block;
 }

 .steps {
   width: 80%;
   display: inline-block;
   margin-left: 40px;
   .step-description {
     position: relative; // added
     border: 1px solid #000;
     background-color: #7f7f7f;
     border-radius: 0.25rem;
     &:before {
       content: url("https://image.ibb.co/gxZuTc/step.png");
       position: absolute;
       top: 50%; // added
       transform: translateY(-50%); // added
     }
   }
}

之前的绝对位置 - 垂直中心

Absolute position of before - vertical center

html

css

center

pseudo-element