Когда я использую transform translate, моя высота границы увеличивается на 1px, как это решить? - PullRequest
Новая
       14

Когда я использую transform translate, моя высота границы увеличивается на 1px, как это решить?

0 голосов
/ 26 февраля 2020

Я пытался установить 1px разделитель с вертикальным центром, используя transform: translate (-50%, -50%); и top: 50%; но работает нормально для вертикального центра, но моя высота разделителя увеличивается на 1px больше, поэтому мой разделитель Отображение общей высоты 2px , поэтому любое решение для этой проблемы. эта структура исправлена, поэтому, пожалуйста, помогите мне.

Спасибо за внимание. 

.number {
  font-size: 50px;
  line-height: 56px;
  font-weight: bold;
}
.title {
    font-size: 24px;
    line-height: 30px;
    font-weight: 500;
}
.separator-line {
    position: absolute;
    top: 50%;
    left: calc(100% + 15px);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 60%;
    background-color: #000;
    height: 1px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section>
  <div class="container">
      <div class="row my-5">
        <div class="col-3 text-center px-3">
          <div class="position-relative mb-4">
              <span class="separator-line"></span>
              <div class="number">01</div>
          </div>
          <span class="d-block title mb-3">Completed Project</span>
          <p class="px-4">Lorem ipsum is simply text of the printing typesetting Lorem.</p>
        </div>
        <div class="col-3 text-center px-3">
            <div class="position-relative mb-4">
                <span class="separator-line"></span>
                <div class="number">02</div>
            </div>
            <span class="d-block title mb-3">Completed Project</span>
            <p class="px-4">Lorem ipsum is simply text of the printing typesetting Lorem.</p>
        </div>
        <div class="col-3 text-center px-3">
            <div class="position-relative mb-4">
                <span class="separator-line"></span>
                <div class="number">03</div>
            </div>
            <span class="d-block title mb-3">Completed Project</span>
            <p class="px-4">Lorem ipsum is simply text of the printing typesetting Lorem.</p>
        </div>
        <div class="col-3 text-center px-3">
            <div class="position-relative mb-4">
                <div class="number">04</div>
            </div>
            <span class="d-block title mb-3">Completed Project</span>
            <p class="px-4">Lorem ipsum is simply text of the printing typesetting Lorem.</p>
        </div>
    </div>
  </div>
</section>

1 Ответ

1 голос
/ 26 февраля 2020

Изменить CSS использовать Это transform: translateX(-50%); для .separator-line

.number {
  font-size: 50px;
  line-height: 56px;
  font-weight: bold;
}
.title {
    font-size: 24px;
    line-height: 30px;
    font-weight: 500;
}
.separator-line {
    position: absolute;
    top: 50%;
    left: calc(100% + 15px);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 60%;
    background-color: #000;
    height: 1px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section>
  <div class="container">
      <div class="row my-5">
        <div class="col-3 text-center px-3">
          <div class="position-relative mb-4">
              <span class="separator-line"></span>
              <div class="number">01</div>
          </div>
          <span class="d-block title mb-3">Completed Project</span>
          <p class="px-4">Lorem ipsum is simply text of the printing typesetting Lorem.</p>
        </div>
        <div class="col-3 text-center px-3">
            <div class="position-relative mb-4">
                <span class="separator-line"></span>
                <div class="number">02</div>
            </div>
            <span class="d-block title mb-3">Completed Project</span>
            <p class="px-4">Lorem ipsum is simply text of the printing typesetting Lorem.</p>
        </div>
        <div class="col-3 text-center px-3">
            <div class="position-relative mb-4">
                <span class="separator-line"></span>
                <div class="number">03</div>
            </div>
            <span class="d-block title mb-3">Completed Project</span>
            <p class="px-4">Lorem ipsum is simply text of the printing typesetting Lorem.</p>
        </div>
        <div class="col-3 text-center px-3">
            <div class="position-relative mb-4">
                <div class="number">04</div>
            </div>
            <span class="d-block title mb-3">Completed Project</span>
            <p class="px-4">Lorem ipsum is simply text of the printing typesetting Lorem.</p>
        </div>
    </div>
  </div>
</section>
...