如何始终将伪元素水平放置在中间?我将其绝对定位为一个百分比值,该百分比值是我相对于元素的宽度所理解的,但是在不同的屏幕尺寸上,圆形“ OR”并不是始终位于中间...
见下文:
.content {
display: flex;
flex-direction: row;
justify-content: space-evenly;
text-align: center;
margin: 20px;
}
.cc-content {
width: 50%;
padding: 5px 20px;
position: relative;
background-color: red;
}
.cc-content-1 {
margin-right: 3px;
}
.cc-content-2 {
margin-left: 3px;
}
.cc-content-1:after {
content: 'OR';
display: inline-block;
position: absolute;
vertical-align: middle;
line-height: 60px;
top: 20px;
left: 90%;
z-index: 1;
font-size: 21px;
font-weight: bold;
border-radius: 100%;
width: 60px;
height: 60px;
background-color: #F2F2F2;
color: #006AAD;
}
<div class="content">
<div class="cc-content cc-content-1">
<h3>Header Here</h3>
<p>Lorem Ipsuom gshjgshj gshjgsajhusgs gsaiyusgisysgsyigs</p>
</div>
<div class="cc-content cc-content-2">
<h3>Header Here</h3>
<p>Lorem Ipsuom gshjgshj gshjgsajhusgs gsaiyusgisysgsyigs</p>
</div>
</div>
如果您调整窗口的大小,您会看到圆圈偏离中心稍有偏离,我如何始终将圆圈保持在绝对位置的中心?是不是百分比?我尝试使用flex,因为它位于flex容器中,但似乎没有任何作用。
如何将位置绝对:after
元素水平居中?
代替left: 90%
,您可以执行left: calc(100% - 30px)
。
30px是伪元素的宽度的一半。
首先,我将在HTML中添加“或”,因此屏幕阅读器可以正确朗读。然后,您可以相对于整个容器定位该元素,百分比为yes。您可以使用left: 50%
将其精确地移到中间,然后使用transform: translateX(-50%)
将其一半的宽度移回到左侧(这样,您不必知道“ or”元素的宽度)。
.content {
display: flex;
flex-direction: row;
justify-content: space-evenly;
text-align: center;
margin: 20px;
position: relative;
}
.cc-content {
width: 50%;
padding: 5px 20px;
position: relative;
background-color: red;
}
.cc-content-1 {
margin-right: 3px;
}
.cc-content-2 {
margin-left: 3px;
}
.or {
display: inline-block;
position: absolute;
vertical-align: middle;
line-height: 60px;
top: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
font-size: 21px;
font-weight: bold;
border-radius: 100%;
width: 60px;
height: 60px;
background-color: #F2F2F2;
color: #006AAD;
text-transform: uppercase;
}
<div class="content">
<div class="cc-content cc-content-1">
<h3>Header Here</h3>
<p>Lorem Ipsuom gshjgshj gshjgsajhusgs gsaiyusgisysgsyigs</p>
</div>
<div class="or">or</div>
<div class="cc-content cc-content-2">
<h3>Header Here</h3>
<p>Lorem Ipsuom gshjgshj gshjgsajhusgs gsaiyusgisysgsyigs</p>
</div>
</div>