how to bring an image in the middle position from where the text is starting?

When tab will select, the arrow image will appear before the tab text. But its appearing just at 开发者_运维技巧the left hand top corner.

Its looking like :

>

    abc

I want like:

>abc

The css is given below:

#navigation .selected a { background: url(../images/custom/arrow.png) no-repeat scroll 0 0; }

I've tried like :

#navigation .selected a {
vertical-align: middle;

background: url(../images/custom/arrow.png) no-repeat scroll 0 0; 
}

but its not working :(

You can influence the alignment of the background image using the 2 last parameters:

   #navigation .selected a {
      background: url(../images/custom/arrow.png) no-repeat scroll left center; 
     }

Depending on the other css present left bottom may get better results, or exact px-alignment may be needed.

If you have any further problems aligning the background properly, an url where the problem occurs would be of help.