PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Thursday, November 17, 2022

[FIXED] When i use transform translate than my border height increase more 1px how to solve it?

 November 17, 2022     css, html, vertical-alignment     No comments   

Issue

I wast try to set 1px separator with vertically center using transform: translate(-50%, -50%); and top: 50%; but working fine for vertically center but my separator height increase with 1px more so my separator total height display 2px so any solution for that issues. this structure is fixed so please help me.

Thanks in adavance.

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


Solution

Change CSS use This transform: translateX(-50%); for .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>



Answered By - Prakash Software
Answer Checked By - David Marino (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing