Geek asks and answers

How to vertically center a pseudo element image in CSS?

There are several similar questions that I found there, but none of the answers worked. Here is my problem:

I am trying to insert and center the image of a decorative bracket before and after some content as follows:

Since I have two images, I cannot insert them using the background property (in CSS2). Therefore, I use the before and: after tags:

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

Unfortunately, this leads to the alignment of images to the baseline of the text as follows:

I tried applying "vertical-align: middle" and "vertical-align: -50%" to pseudo-elements without success. They move a little, but not to the middle, as shown above.

I also tried applying vertical alignment to the paragraph itself without success.

.

, . .

, , - "position: relative; top: XXpx;" , , . , . ?

+3
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;
}
+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*/
}
+1

More articles:


All Articles