0

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

Edited by trixma: n/a

Attachments buttons.JPG 1.93 KB
3
Contributors
4
Replies
5
Views
6 Years
Discussion Span
Last Post by ko ko
0

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;}

Edited by macneato: n/a

0

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.

0

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

trixma

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.