SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
-
Dec 8, 2007, 20:01 #1
- Join Date
- Nov 2007
- Posts
- 31
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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,
skLast edited by specialkitty; Dec 8, 2007 at 21:29.
-
Dec 8, 2007, 23:04 #2
labels are inline elements you have to display: block them to give them a width.
-
Dec 8, 2007, 23:06 #3Code:
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; }
-
Dec 8, 2007, 23:07 #4
- 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; }
-
Dec 8, 2007, 23:19 #5
ya i just learned that =] and i misread his post completely.
It's late cut me some slack
-
Dec 8, 2007, 23:29 #6
Bookmarks