如何在CSS中垂直对伪元素图像进行居中？

Question

有几个类似的问题我已经发现，但没有一个答案是有效的。我的问题是：

我试图在一些内容之前和之后插入和居中一个装饰支架图像，如下所示：

​

​

因为我有两个图像，所以不能使用背景属性(在CSS2中)插入它们。因此，我使用的是：“前”和“后”这样的标记：

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

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

​

​

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

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

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

我还试着调整段落本身和伪元素的线高。这也没用。

我可以在伪元素上使用" position : relative；top: XXpx;“这样的方法将括号准确地放置在我想要的位置上，但是如果我有多行文本，或者在某些情况下有不同的字体大小，那么括号就不再是居中的。我希望图片总是垂直对齐到中间的文本。有什么想法吗？

Answer 1

试试这个：

p#special{
    position: relative;
}
p#special:before { 
    content: " "url(/images/left-bracket.png);
    position: absolute;
    top: 50%;
    left: 0px;
}
p#special:after { 
    content: " "url(/images/right-bracket.png);
    position: absolute;
    top: 50%;
    right: 0px;
}

Answer 2

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*/
}