Question

我无法集中::after CSS伪元素。主要元素是图像：

图片应位于页面的中心
显示图片标题的::after伪元素应该叠加在图片的中心。

这就是我所拥有的：

#frame {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: black;
  &: after {
    content: 'Caption overlay';
    color: white;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

<div id="frame">
  <svg width="200" height="200">...</svg>
</div>

图像框在页面上正确居中，但其标题不在图像上居中。相反，它位于右下角。

Codepen

Answer 1

您可以将text-align:center;和position: fixed;添加到:after伪元素中来实现。

#frame {
  position: fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background-color: black;
  &:after {
    position:fixed;
    content: 'Caption overlay';
    color: white;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
  }
}

Answer 2

你也可以使用svg自己的text element和text-anchor。

此外，该方法white-space: nowrap应该将文本保持在一行中。

<div id="frame">
  <svg width="200" height="200">
    <circle cx="100" cy="100" r="75" stroke="green" stroke-width="15"/>
    <text x="100" y="100" text-anchor="middle">Caption Overlay</text>
  </svg>
</div>

svg:not(:root) {
  overflow: visible;
}
text {
  fill: red;
  white-space: nowrap;
}

Answer 3

将position:absolute添加到您的::after pseudo element。

 &:after {
    position:absolute;
    width:100%;
    text-align:center;
    ........
    ........
  }

CSS如何居中::伪元素之后

3 个答案: