Aligning text in an image-based button

[trixma]

Hey guys,

I'm trying to vertically center-align text on a button but no matter what it always shows up too low.

Here's my CSS

.fb8 {
	background: url(button.png) no-repeat;
	border: none;
	outline: none;
	color: #bbbbbb;
	height: 22px;
	width: 105px;}

and this is my html:

<input type="button" value="Login" class="fb8" name="btnLogin" />
 <input type="button" value="Register" class="fb8" name="btnRegister" />

The Login/Register text appears slightly below the middle of the button and I'd like it to show up dead center.

I uploaded an image of the problem

Thanks,
trixma

[macneato]

Really simple just add a line-height

.fb8 {
	background: url(button.png) no-repeat;
	border: none;
	outline: none;
	color: #bbbbbb;
	height: 22px;
        line-height:22px /*the line height must be set to the same amount of pixels your element is */
	width: 105px;}

[ko ko]

The line-height with the form elements are depending on the browser and the version on each browser. In my experience, Firefox cannot understand the line-height property with the form elements while IE and other modern browsers are working well. Put the padding top/bottom is better and already solved for cross-browser compatible.

[trixma]

Thanks Zero13! padding is exactly what I was looking for, and it works in all browsers :)

trixma

[ko ko]

Mark this thread as 'Solved' then. So, it will make us clear.