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

Question

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

我试图在这样的内容之前和之后插入装饰支架图像并将其居中：

由于我有两张图片，我无法使用背景属性（在CSS2中）插入它们。所以我使用：before和：after标签就像这样：

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

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

我尝试过应用＆＃34; vertical-align：middle＆＃34;和＆＃34; vertical-align：-50％＆＃34;伪元素没有成功。如上所示，它们略微移动，但不是中间移动。

我还尝试将vertical-align应用于段落本身但没有成功。

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

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

我可以使用＆＃34; position：relative;之类的东西将括号准确定位在我想要的位置。上：XXpx;＆＃34;在伪元素上，但如果我有多行文本或某些情况下不同的字体大小，括号将不再居中。我希望图像始终垂直对齐到文本的中间。有什么想法吗？

Answer 1

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

Answer 2

试试这个：

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