Vertically centering the label tag

[specialkitty]

Hi I would like to vertically center my label tag, whilst maintaining a width from the inputs. Here's what I've done:

	label{
		cursor: pointer;
		color: #000;
		font-weight: bold;
		font-size: 12px;
		line-height: 16px;
		}
	label.login{
		width: 80px;
		float: left;
		}
	input.normal{
		margin: 1px 0;
		padding: 2px;
		border: 1px solid #555;
		background: #fff;
		color: #000;
		margin-bottom: 5px;
		}

And the simple form section:

	<form action="" method="post" id="loginform" class="">
			<label for="username" class="login">Username</label>
			<input name="username" id="username" class="normal" tabindex="1" size="25" type="text"/>
 
			<label for="password" class="login">Password</label>
			<input name="password" id="password" class="normal" tabindex="2" size="25" type="password"/>
	</form>

Thanks,
sk

[galen]

labels are inline elements you have to display: block them to give them a width.

[galen]

label{
        cursor: pointer;
        color: #000;
        font-weight: bold;
        font-size: 12px;
        line-height: 16px;
        }
label.login{
        width: 80px;
	display:block;
	clear:left;
	float:left;
        }
input.normal{
	float:left;
        margin: 1px 0;
        padding: 2px;
        border: 1px solid #555;
        background: #fff;
        color: #000;
        margin-bottom: 5px;
        }

Getting the label to align to the middle of the input without a gross relative positioning is something someone else will have to help you with.

[Centauri]

All you have to do is increase the line height to suit :

label{
        cursor: pointer;
        color: #000;
        font-weight: bold;
        font-size: 12px;
        line-height: 24px;
        }

@galen - floated elements are block level.

[galen]

ya i just learned that =] and i misread his post completely.

It's late cut me some slack

[Centauri]

It's late cut me some slack

Just a lazy Sunday afternoon here ...