small code big headache!!!!! help me to align this

Discussion in 'CSS' started by flawlessking, Apr 25, 2009.

0
  1. #1
    HI GUYS,
    i want this input field to align in middle of the box............






    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>

    <style type="text/css">
    <!--
    .barbox
    {
    background-color:#666666;
    height: 50px;
    width: 200px;
    margin: auto;

    }
    -->
    </style>
    </head>

    <body>

    <div class="barbox">
    <input type="text" name="search" value="Search..." style="vertical-align:middle;" />
    </div>

    </body>
    </html>
     
    flawlessking, Apr 25, 2009 IP
  2. qazu

    qazu Well-Known Member

    Messages:
    1,834
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    165
    #2
    Just add text-align: center; to your .barbox sylesheet. I'mm sure there's a better way to get it vertically aligned but adding a padding-top: 12px; and reducing the height to height: 38px; will work, but might have problems in IE6 :(
     
    qazu, Apr 25, 2009 IP
  3. flawlessking

    flawlessking Well-Known Member

    Messages:
    136
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #3
    good gazu but it was just the pixel adjustment mathematically there's ain't other way of getting it perfectly in the middle?
     
    flawlessking, Apr 25, 2009 IP
  4. traian13

    traian13 Peon

    Messages:
    203
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    use a table with 2 columns and in one column you put something of 50px height and in the second you add the input box ... it will align vertically ...
     
    traian13, Apr 25, 2009 IP
  5. qazu

    qazu Well-Known Member

    Messages:
    1,834
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    165
    #5
    I think adding display: table-cell; vertical-align: middle; to your original stylesheet should work.
     
    qazu, Apr 26, 2009 IP
  6. booyahdesigners

    booyahdesigners Peon

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I've never tried the display: table-cell; method. I usually just do the pixel math or eyeball it.
     
    booyahdesigners, Apr 29, 2009 IP