SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    vertically centered submit button without table

    Code:
    <!doctype html>
    <html> 
      <head>
        <meta charset="UTF-8">
        <title>search box6</title>
      </head>
     
    <body>
    
    <div>
    <span><input type="text" style="width:500px;font-size:30pt;padding:2px; 
    border:3px solid green" value="div text input"></span>
    <span><input type="submit"  value=" div submit button " 
    style="font-size:10pt;color:white;background-color:green;
    border:2px solid #336600;padding:3px;vertical-align:middle"></span>
    </div>
    
    <table>
      <tr>
        <td><input type="text" style="width:500px;font-size:30pt;padding:2px; 
    border:3px solid green" value="table text input"></td>
        <td><input type="submit"  value=" table submit button " style="font-size:10pt;
    color:white;background-color:green;border:2px solid #336600;padding:3px;"></td>
      </tr>
    </table>
    
    </body>
    </html>
    I have the code above at http://dot.kr/x-test/searchBox6.php (temperal URL) .
    The page has two submit buttons.
    The one is div submit button and the another is table submit button.

    The table submit button is centered vertically while the div submit button is not exactly centered vertically.

    How can I make the div submit button to be centered vertically without table ?
    (Should I go back to table for it?)

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,812
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Instead of the table, use <P> (or <DIV>s if you prefer ) for each row

    like this: <DIV><input type="text" style="width:500px;font-size:30pt;padding:2px;
    border:3px solid green; vertical-align:middle;" value="table text input">
    <input type="submit" value=" table submit button " style="font-size:10pt;
    color:white;background-color:green;border:2px solid #336600;padding:3px;"></DIV>


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
  •