Css 如何将文本居中：在伪元素之前？

我有这样的代码：

span{
边界半径：50%；
背景色：#d8d9dd；
边框：6px实心#262c40；
宽度：25px；
高度：25px；
利润率：30像素0.40像素；
显示：块；
}
跨度：之前{
内容：attr（数据值）；
位置：相对位置；
空白：预处理；
显示：内联；
顶部：-27px；
左：-29px；
宽度：200px；
文本对齐：居中；
}

来自：

[默认情况下，

：before

伪元素]是内联的

给内联元素一个

宽度

没有任何作用，因此您需要将其样式设置为

显示：块

（或者

内联块

，如果更合适的话）。结果还表明，您需要将

left

值调整为大约

-88px

，以使文本位于圆的中心

span{
边界半径：50%；
背景色：#d8d9dd；
边框：6px实心#262c40；
宽度：25px；
高度：25px；
利润率：30像素0.40像素；
显示：块；
}
跨度：之前{
内容：attr（数据值）；
位置：相对位置；
空白：预处理；
显示：内联；
顶部：-27px；
左：-88px；
宽度：200px；
文本对齐：居中；
显示：块；
}

---

我被打败了，但我的解决方案是：

span {
   border-radius: 50%;
   background-color: #d8d9dd;
   border: 6px solid #262c40;
   width: 25px;
   height: 25px;
   margin: 30px 0 0 40px;
   display: block;
}
span:before {
   content: attr(data-value);
   position: relative;
   white-space: pre;
   display: inline-block;
   top: -27px;
   left: -50px;
   width: 125px;
   text-align: center;
}

---

更改是使用

内联块

显示在

：before

样式上，并调整文本的

左侧

和

宽度
 最好的方法是使用流行的居中技术将
相对于
span
绝对定位在
伪元素之前：

top: 0;
left: 50%;
transform: translate(-50%, -25px);

请注意，-25px用于偏移圆上方的文本（高度为25px）-请参见下面的演示：


span{
边界半径：50%；
背景色：#d8d9dd；
边框：6px实心#262c40；
宽度：25px；
高度：25px；
利润率：30像素0.40像素；
显示：块；
位置：相对位置；
}
跨度：之前{
内容：attr（数据值）；
位置：绝对位置；
空白：预处理；
显示：内联；
排名：0；
左：50%；
转换：转换（-50%，-25px）；
}
添加
显示：内联块并添加
左边距：-87px
。其中87px来自

100px（整个宽度的50%200px）-13px（跨度宽度的50%25px）


span{
边界半径：50%；
背景色：#d8d9dd；
边框：6px实心#262c40；
宽度：25px；
高度：25px；
利润率：30像素0.40像素；
显示：块；
}
跨度：之前{
内容：attr（数据值）；
位置：相对位置；
空白：预处理；
显示：内联块；
顶部：-27px/*
左：-29px；*/
左边距：-87px；
宽度：200px；
文本对齐：居中；
}
我建议不要使用负面翻译。如果操作不够仔细，它可能会在视口之外结束

此外，您不应该插入带有伪元素的内容。伪元素应仅用于样式设置目的。像这样：


正文{
显示：内联块；
}
跨度{
显示：块；
文本对齐：居中；
}
跨度：之后{
内容：''；
边界半径：50%；
背景色：#d8d9dd；
边框：6px实心#262c40；
宽度：25px；
高度：25px；
利润率：10px自动30px；
显示：块；
}
2016年11月
2016年5月
我们应该使用逻辑代码，而不是任何点击、追踪和数字游戏

我在pseudo元素中使用flex将其首先集中在span元素上

然后我使用transform在逻辑上定位伪元素


/*设计样式以使演示文稿看起来好看*/
身体{
边框：5px纯黑；
填充：50px；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
/*主要款式从这里开始*/
跨度{
边界半径：50%；
背景色：#d8d9dd；
边框：6px实心#262c40；
宽度：25px；
高度：25px；
利润率：30像素0.40像素；
显示：块；
}
跨度：之前{
内容：attr（数据值）；
宽度：150px；
边框：纯黑1px；
/*使用“柔体”将其居中并位于跨度上*/
显示器：flex；
证明内容：中心；
对齐项目：居中；
/*使用transform并在逻辑上对其进行定位（通过考虑父跨度的边界宽度，当然也可以使用calc（））*/
转换：转换（计算（-50%+2*6px），计算（-100%-6px））；
}

我正试图通过为处理程序添加标签来修改jQuery UI滑块。我认为当跨距内有文本时，它不会起作用。虽然没有明确提到，但应该注意伪元素上的
宽度
是必不可少的，因为它单独提供了居中的空间，否则，它只是集中在自己的长度上，有效地使其与
li
项对齐。请参阅最符合逻辑和正确的答案（而不是点击和跟踪定位）！；）