SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to display input in the middle ?

    In the code below, how to display the first input (login_username) in the middle when we have long text in the label ?

    Thanks

    Code:
    <div class="easyui-panel" title="Test Account"  style="height:100px;padding: 3px;" data-options="collapsible:true,fit:false,doSize:false," >
                         <div> 
                             <label style="width:20%; display: inline-block; font-size:12px; margin-right: 5px;" for="login_username">User Name Long Long Long</label>
                             <input style="width:75%;" type="text" name="login_username" id="login_username">
                         </div>
                         <div style="margin-top: 3px;"> 
                             <label style="width:20%; display: inline-block; font-size:12px; margin-right: 5px;" for="login_username1">User</label>
                             <input style="width:75%;" type="text" name="login_username1" id="login_username1">
                         </div>
                     </div>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not quite sure what you mean by "in the middle" as such but if you want the text centred then text-align:center on the label will do that.
    Code:
    <label style="width:20%; display: inline-block; font-size:12px; margin-right: 5px;text-align:center" for="login_username">User Name Long Long Long</label>
    However that may look a bit odd as the other labels are left aligned so I feel you must mean something else?

  3. #3
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no, this is not what I want. In the first line, the input should be in the center in alignment with the text in the left.

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,154
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    I'm having trouble understanding you, but I'm guessing this is what you mean
    Code:
    NOT LIKE
    
    really long long label [input]
    label [input]
    
    BUT MORE LIKE
    
    really long long label  [input]
    label			[input]

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Mittineague View Post
    I'm having trouble understanding you, but I'm guessing this is what you mean
    Code:
    NOT LIKE
    
    really long long label [input]
    label [input]
    
    BUT MORE LIKE
    
    really long long label  [input]
    label			[input]
    If I'm not mistaken the code is already like that as the labels have a width

    I'm wondering whether the OP means the vertical alignment rather than horizontal?

    If so then the label and input should be set to vertical-align:middle.

    Code:
    label,input{vertical-align:middle}

  6. #6
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,154
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    Hmmm, maybe ???
    Code:
    a
    really
    long	[input]
    long
    label
    
    label	[input]

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Mittineague View Post
    Hmmm, maybe ???
    Code:
    a
    really
    long	[input]
    long
    label
    
    label	[input]
    Yes that's what I was thinking


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
  •