How to pad the text in a span, but not pad the background image

Question

I have a situation where I have a SPAN with a background image of a button, with text. The text is however on top of the button, while I want it to be vertically centered. I tried to adjust it with padding, but then the background image shifts along...

The html code:

<span class="button" style="BACKGROUND-IMAGE: url('images/button.gif'); HEIGHT: 50px; PADDING: 15px 10px 0px 0px; WIDTH: 50px">button text</span>

Thanks in advance, I have the feeling that I am overlooking something simple...

Answer 1

Add this to your CSS:

line-height: 50px;
display: inline-block;
padding: 0 10px;

You may need to adjust your padding, but setting the line height to the height of the button itself will center its content vertically.