我没有尝试使用transform:translate(-50%,-50%);和top:50%;在垂直方向居中设置1px分隔符,但在垂直居中情况下可以正常工作但是我的分隔符高度增加了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>
更改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>