Абсолютное положение перед - вертикальный центр - PullRequest
Новая
       8

Абсолютное положение перед - вертикальный центр

0 голосов
/ 26 апреля 2018

Я пытаюсь написать график. И я остановился в момент центрирования псевдоэлемента по вертикали. Я уже пытался изменить top: 0, translate, translateY, вертикальное выравнивание и т. Д. К сожалению, ничего не хочет работать должным образом. 

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

Ответы [ 2 ]

0 голосов
/ 26 апреля 2018

Попробуйте это: 

.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
     }
   }
}
0 голосов
/ 26 апреля 2018

Попробуйте это 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%);
      }
  }
}
...