css - How to put <li> content in the middle with before: and after: images? -

i'm trying make navigation using <ul>, have 2 images (36px height) right , left borders of button (list item).

i add them before: , after: in css, after that, link inside <li> (for example: "main") appears in bottom because of 2 images added (before: , after:).

i want text in middle of 2 images normal button.

the green want, red get.

thanks trying help, somehow managed it. css:

#topmenu ul{ list-style: none; padding: 0; }  #topmenu ul li{ float: left; margin-right: 5px; background-image: url('images/btnback.png'); background-repeat: repeat-x; height: 36px; border-radius: 8px; }  #topmenu ul li:before{ content: url('images/btnleft.png'); float: left; }  #topmenu ul li:after{ content: url('images/btnright.png'); } 

and html:

<div id="topmenu"> <ul> <li> <a href="#">main</a> </li> <li> <a href="#">about</a> </li> <li> <a href="#">contact</a> </li> </ul> </div>