html - 始终将伪元素水平保持在中间
问题描述
如何始终将伪元素水平保持在中间?我用一个百分比值绝对定位它,我理解它是相对于元素的宽度,但在不同的屏幕尺寸上,圆形“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
元素?
解决方案
与@mgrsskls 非常相似,但使用的是实际:after
元素。这是一个使用的老技巧absolute
,然后添加left
等于半角的负边距。但是在您的情况下,还需要考虑额外的余量。
.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: 100%;
margin-left: -27px;
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>
推荐阅读
- ios - 如何在ios中沿行车方向旋转Apple地图?
- python - 类定义中定义的函数导致的 AttributeError
- javascript - 创建对话框组件并从父级显示/隐藏
- node.js - 在 Sequelize 如何按 `column_a - column_b` 排序?
- excel - 通过数据验证添加短语时单元格中多个短语的部分文本颜色 [Excel-VBA]
- c++ - 多通道内核的图像卷积
- c# - 停止移动后面向z方向的字符?
- c# - 这是 Partitioner.Create(int fromInclusive, int toExclusive) 中的错误吗?
- mongodb - 在 MongoDB 中将数组转换为对象数组
- python-2.7 - 如何在元组列表中打印以 P: 开头的短语