CSS CSSの疑似要素

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

あなたの:after擬似要素にもposition: fixed;text-align:center;とを追加することによってそれを行うことができます。

#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

あなた::after pseudo elementにposition:absoluteを追加します。

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

Answer 3

また、SVG独自のtext elementtext-anchorと一緒に使用することができます。

さらに、どのような方法でも、white-space: nowrapは1行にテキストを保持する必要があります。

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