Question

我有这样的代码：

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;
  top: -27px;
  left: -29px;
  width: 200px;
  text-align: center;
}

<span data-value="November 2016"></span>
<span data-value="May 2016"></span>

如何将文本居中：在伪元素位于跨度的中间？有可能吗？

Answer 1

最好的方法是使用流行的居中技术定位 before伪元素绝对相对于span：

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

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

＆＃13;

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

＆＃13;

<span data-value="November 2016"></span>
<span data-value="May 2016"></span>

＆＃13;

Answer 2

来自MDN：

[:before伪元素]默认为内联

提供内联元素width不会执行任何操作，因此您需要将其设置为display: block（如果更合适，则为inline-block）。事实证明，您需要将left值调整为大约-88px，以使文字在圆圈上居中。

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;
  top: -27px;
  left: -88px;
  width: 200px;
  text-align: center;
  display: block;
}

<span data-value="November 2016"></span>
<span data-value="May 2016"></span>

Answer 3

我建议不要使用负面翻译。如果你做得不够仔细，它可能最终会在视口之外。

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

＆＃13;

body {
  display: inline-block;
}
span {
  display: block;
  text-align: center;
}
span:after {
  content: '';
  border-radius: 50%;
  background-color: #d8d9dd;
  border: 6px solid #262c40;
  width: 25px;
  height: 25px;
  margin: 10px auto 30px;
  display: block;
}

＆＃13;

<span>November 2016</span>
<span>May 2016</span>

＆＃13;

由于text-align: center，范围内的文字居中。

由于margin-left: auto和margin-right: auto，伪元素圈居中。

Answer 4

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

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;
}

更改是使用inline-block样式上的:before显示，并调整文本的left和width。

Answer 5

添加display:inline-block;并添加margin-left:-87px。其中87px来自

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

＆＃13;

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: -29px;*/  
  margin-left: -87px;
  width: 200px;
  text-align: center;
}

＆＃13;

<span data-value="November 2016"></span>
<span data-value="May 2016"></span>

＆＃13;

Answer 6

我们应该使用 LOGICAL CODE （逻辑代码），而不是任何击打和拖尾以及数字游戏！

我在伪元素中使用了flex，首先将其居中在span元素上。

然后我使用了变换，以逻辑定位伪元素。

/*styling to just make the presentation look good*/
body{
  border:5px solid black;
  padding:50px;
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;
}

/* main stylings start here*/
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);
  width:150px;
  border:solid black 1px;
  
  /*use flex to center it to middle & upon the span*/
  display:flex;
  justify-content:center;
  align-items:center;
  
  /*use transform and position it LOGICALLY (by considering border widths of the parent span and ofcourse using calc() )*/
  transform: translate(calc(-50% + 2 * 6px), calc(-100% - 6px));
}

<span data-value="November 2016"></span>
<span data-value="May 2016"></span>

我会要求使用LOGICAL代码，而不要使用破坏设计的匹配值和追踪值。编写响应代码。祝您编码愉快！

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

6 个答案: