www.webdeveloper.com
Results 1 to 7 of 7

Thread: How to control text alignment within input?

  1. #1
    Join Date
    Sep 2005
    Posts
    1,629

    Question How to control text alignment within input?

    I have css but how to control text in the input that will be in the middle of input (vertical-horizontal control).
    It seems that 22px input will give me text to the top...with font size 12px.

  2. #2
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Apply a line-height the height of the input.
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  3. #3
    Join Date
    Sep 2005
    Posts
    1,629

    Question

    Please see what I have. It will bring text not in the middle even I use:
    vertical-align:middle; see snap. Is this control correct or my css uses some div where is align TOP...
    Attached Images Attached Images

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    As KDLA said: use a block element and give it the same height and line-height values
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>untitled</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <style type="text/css">
    .mydiv {
    width:100px;
    height:50px;
    line-height:50px;
    border:solid 1px #ff0000;
    }
    </style>
    </head>
    <body>
    <div class="mydiv">text here</div>
    </body>
    </html>

  5. #5
    Join Date
    Sep 2005
    Posts
    1,629
    ok, I understand and have given.
    you see text inside input like sample vbvf. I would like to move it in the middle, but it is at the top...this is issue.

  6. #6
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Well you are half-right, it works in IE, but it will not work in FF. It looks like FF has not implemented the CSS line-height within the form's textboxes. I guess the only workaround is to give your input a padding-top enough to bring your text in the middle.

  7. #7
    Join Date
    Sep 2005
    Posts
    1,629
    Will IE detect padding-top? I think I noticed that sometimes IE and Mozilla show margin and padding different.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles