1

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...

Daniel van Dommele
  • 550
  • 2
  • 14

1 Answers1

3

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.

Niko
  • 26,516
  • 9
  • 93
  • 110
  • Thanks, the line-height indeed helped me get it right, although I had to fidget a bit with the line-height, because using the height of the button made it somehow align it near the bottom. – Daniel van Dommele Sep 15 '11 at 09:00