Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Aug 2002
    Posts
    151
    Thanks
    0
    Thanked 0 Times in 0 Posts

    table vertically aligned middle

    i have a table which has align=center thus making it stay in the horizontal center of the page but i would like it to do the same with the vertical center, unfortunately it's not working. I tried:

    <table valign=center

    .body{
    vertical-align: center;
    }


    <div height="100%" valign=center>
    <table..
    </div



    all fail.

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    United Kingdom Confused: Often
    Posts
    859
    Thanks
    0
    Thanked 0 Times in 0 Posts
    this should do it...

    its a nested table inside a div...
    Code:
    <div align="center">
    <table style="width: 100%; height: 100%;">
      <tr>
        <td style="text-align: center; vertical-align: center;">
    	  
          <table>
            <tr>
              <td style="background-color: #FF0000;">
                This should be completely in the middle...
             </td>
           </tr>
          </table>
    	
        </td>
      </tr>
    </table>
    </div>
    this only works in IE i think - i expect someone has a way to do this with less code and more browsers, though
    Last edited by redhead; 10-26-2002 at 12:23 PM.
    redhead

  • #3
    Regular Coder
    Join Date
    Sep 2002
    Location
    Burlington, VT
    Posts
    125
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I had lots of trouble figuring this out too... I believe props go to Mcookie for the seemingly simple solution.
    Code:
    
    <html>
    <head>
    <style type="text/css">
    html, body
    {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    
    table
    {
      height: 100%;
      width: 100%;
      text-align: center;
    }
    </style>
    </head>
    <body>
    
      <table border="0">
        <tr>
          <td>
    
    Stuff Goes Here
    
          </td>
        </tr>
      </table>
    
    </body>
    </html>
    
    well redhead, it's more code and more browsers... 1 out of 2 ain't bad

    -Doug
    Last edited by dauvm; 10-27-2002 at 03:54 AM.
    "The focused mind can pierce through stone."
    - Japanese Maxim

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Dallas, Texas
    Posts
    188
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think it's:

    vertical-align: middle

    (not center)


  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It is, and it only aligns an element in respect to its parent element; if the latter one doesn't fill the entire screen height, or window height, or whatever height, results are... well, probably not what you are looking for.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #6
    Regular Coder
    Join Date
    Sep 2002
    Location
    Burlington, VT
    Posts
    125
    Thanks
    0
    Thanked 0 Times in 0 Posts
    well actually...

    I stripped my code down to bare essentials... save this and preview it.... I tried it in IE 5.5, Opera 6.05, and moz 1.1... worked in all of them.
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>center</title>
    
    <style type="text/css">
    table {
    height: 300px;
    width: 300px;
    text-align: center;
    }
    
    div#center {
    border-style: dotted;
    }
    
    </style>
    
    </head>
    <body>
    stuff before the table
    <table border="1">
    <tr>
    <td>
    cenetered inside the table
    </td>
    </tr>
    </table>
    stuff after the table
    </body>
    </html>
    
    -Doug
    "The focused mind can pierce through stone."
    - Japanese Maxim


  •  

    Posting Permissions

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