After looking for similar questions, none of the answers seem to be working for my specific issue. This is what I'm struggling with:
I am attempting to insert and center a decorative bracket image before and after certain content in the following manner:
Due to having two images, using a background property isn't an option (in CSS2). Thus, I am utilizing the :before and :after tags as shown below:
p#special:before {
content: " "url(/images/left-bracket.png);
}
p#special:after {
content: " "url(/images/right-bracket.png);
}
However, the images end up being aligned with the baseline of the text like so:
Various attempts have been made including applying "vertical-align: middle" and "vertical-align: -50%" to the pseudo elements without much success. They do move slightly, but not to the intended center.
Experimentation has also been done by applying vertical-align to the paragraph itself, adjusting its height to match that of the image, and trying different line-height values on both the paragraph and pseudo elements. Unfortunately, those did not yield desired results either.
An alternative method of positioning the brackets involves using something like "position: relative; top: XXpx;" on the pseudo elements. However, this approach proves problematic when dealing with multiple lines of text or varying font sizes as it disrupts the center alignment. The goal is to always maintain vertical alignment of the images to the middle of the text. Any suggestions?