Question

我试图写一个时间表。我在垂直居中伪元素的那一刻停了下来。我已经尝试过改变顶部：0，翻译，翻译，垂直对齐等等。不幸的是，没有什么比这更好了。

＆＃13;

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

＆＃13;

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

＆＃13;

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

前 - 绝对位置 - 垂直中心

2 个答案: