如何在CSS中垂直居中放置伪元素图像？

我在那里发现了几个类似的问题，但没有一个答案有效。这是我的问题：

我正在尝试在一些内容之前和之后插入一个装饰性的括号图像并将其居中，例如：

因为我有两个图像，所以无法使用背景属性（在CSS2中）插入它们。所以我使用了：before和：after标记，比如：

p#special:before { 
    content: " "url(/images/left-bracket.png);
}
p#special:after { 
    content: " "url(/images/right-bracket.png);
}

不幸的是，这样会使图像与文本的基线对齐，如下所示：

我尝试将“垂直对齐：中间”和“垂直对齐：-50%”应用于伪元素，但没有成功。它们会稍微移动，但不会像上面演示的那样移动到中间

我还尝试将垂直对齐应用于段落本身，但没有成功

我试着结合各种垂直对齐值，将段落的高度调整为图像的高度

我还尝试调整段落本身和伪元素的行距。这也没用

我可以在伪元素上使用类似“position:relative；top:XXpx；”的内容将括号精确定位在我想要的位置，但是如果我有多行文本，或者在某些情况下有不同的字体大小，括号将不再居中。我希望图像始终与文本的中间垂直对齐。有什么想法吗？

试试这个：

p#special:before { 
    content: " "url(/images/left-bracket.png);
    margin-top: 5px /*Offset margin, adjust accordingly*/
}
p#special:after { 
    content: " "url(/images/right-bracket.png);
    margin-top: 5px /*Offset margin, adjust accordingly*/
}

p#特殊{
位置：相对位置；
}
p#特别：在{
内容：“url（/images/left-bracket.png）；
位置：绝对位置；
最高：50%；
左：0px；
}
p#特别：在{
内容：“url（/images/right-bracket.png）；
位置：绝对位置；
最高：50%；
右：0px；
}

谢谢Ansyori的帮助。我试过这样做，但出于某种原因，它将图像的顶部（相对于图像的中部）与内容的50%标记对齐。我可以用顶部0调整图像到它们想要的地方，但是如果内容高度改变，它们就不会在中间。谢谢你的帮助！我意识到我可以将您的解决方案与伪元素上的负上边距（等于图像大小的一半）结合使用，以确保图像始终居中。这不是一个很好的解决方案，但它很有效！谢谢谢谢你，杰克。我考虑只使用硬编码的边距顶部，但如前所述，如果内容的高度发生变化，我需要伪图像保持居中。我最终使用了Ansyori解决方案的修改版本。谢谢不客气，我很高兴你找到了解决办法。祝你的网站好运。