SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Vertically centering the label tag

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

    Code CSS:
    	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:

    Code HTML4Strict:
    	<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
    Last edited by specialkitty; Dec 8, 2007 at 20:29.

  2. #2
    hi galen's Avatar
    Join Date
    Jan 2006
    Location
    New Haven, CT
    Posts
    1,228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    labels are inline elements you have to display: block them to give them a width.

  3. #3
    hi galen's Avatar
    Join Date
    Jan 2006
    Location
    New Haven, CT
    Posts
    1,228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    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.

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All you have to do is increase the line height to suit :
    Code:
    label{
            cursor: pointer;
            color: #000;
            font-weight: bold;
            font-size: 12px;
            line-height: 24px;
            }
    @galen - floated elements are block level.

  5. #5
    hi galen's Avatar
    Join Date
    Jan 2006
    Location
    New Haven, CT
    Posts
    1,228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ya i just learned that =] and i misread his post completely.

    It's late cut me some slack

  6. #6
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by galen View Post
    It's late cut me some slack
    Just a lazy Sunday afternoon here ...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •