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

Question

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

我正在尝试在像这样的某些内容之前和之后插入装饰性括号图像并将其居中:

因为我有两张图片，所以我无法使用背景属性(在 CSS2 中)插入它们。所以我像这样使用 :before 和 :after 标签:

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

不幸的是，这最终会像这样将图像与文本的基线对齐:

我尝试将“vertical-align: middle”和“vertical-align: -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;
}