table vertically aligned centre on page ?

Discussion in 'HTML' started by CRON, Oct 27, 2006.

  1. CRON

    CRON Guest

    Hi all,
    Anyone come across a simple, cross-browser compatible way of aligning a
    table to the vertical centre of a page?
    Cheers,
    Ciarán
    CRON, Oct 27, 2006
    #1
    1. Advertising

  2. CRON

    Ben C Guest

    On 2006-10-27, CRON <> wrote:
    > Hi all,
    > Anyone come across a simple, cross-browser compatible way of aligning a
    > table to the vertical centre of a page?
    > Cheers,
    > Ciarán


    It should work to do:

    table
    {
    position: absolute;
    height: 200px;
    top: 0px;
    bottom: 0px;
    margin: auto 0;
    }

    For vertical centering to work, top, bottom and height must all be set
    to lengths, and top and bottom margins to auto.

    But this doesn't work in Firefox. The spec is a little ambiguous, but
    something with display: table should really behave on the outside like a
    block box.

    You can set the same bunch of properties on a div instead, and put the
    table inside the div. That works in FF.

    The downside here is you need to set the height-- you can't vertically
    centre a table with auto height.
    Ben C, Oct 27, 2006
    #2
    1. Advertising

  3. CRON

    CRON Guest

    Cheers for the reply Ben but im not having any joy here. I've tried it
    in IE7 and FF but it doesnt seem to work in either. Maybe it's a purely
    IE6 thing? Something to do with quirks mode?
    CRON, Oct 27, 2006
    #3
  4. CRON

    Ben C Guest

    On 2006-10-27, CRON <> wrote:
    > Cheers for the reply Ben but im not having any joy here. I've tried it
    > in IE7 and FF but it doesnt seem to work in either.


    It should work in FF (putting the table inside a div as suggested).

    > Maybe it's a purely IE6 thing? Something to do with quirks mode?


    Always use strict mode if you value your sanity.

    Post a link to a simple example and I'll see if I can see why it doesn't
    work in FF.
    Ben C, Oct 27, 2006
    #4
  5. CRON

    CRON Guest

    > Post a link to a simple example and I'll see if I can see why it doesn't
    > work in FF.


    OK, cheers Ben, I appreciate the effort:
    http://www.keepitsafe.ie/newsiteTemp/
    Nothing happens in FF - Looks wierd in IE7 - Haven't tried IE6 yet
    (dont have it on this macine!)

    Thanks again,
    Ciarán
    CRON, Oct 27, 2006
    #5
  6. CRON

    Ben C Guest

    On 2006-10-27, CRON <> wrote:
    >> Post a link to a simple example and I'll see if I can see why it doesn't
    >> work in FF.

    >
    > OK, cheers Ben, I appreciate the effort:
    > http://www.keepitsafe.ie/newsiteTemp/
    > Nothing happens in FF - Looks wierd in IE7 - Haven't tried IE6 yet
    > (dont have it on this macine!)


    I don't understand. I tried it in FF, and the table was there, centered
    vertically in the middle of the page.
    Ben C, Oct 27, 2006
    #6
  7. CRON

    Ben C Guest

    On 2006-10-27, Ben C <> wrote:
    > On 2006-10-27, CRON <> wrote:
    >>> Post a link to a simple example and I'll see if I can see why it doesn't
    >>> work in FF.

    >>
    >> OK, cheers Ben, I appreciate the effort:
    >> http://www.keepitsafe.ie/newsiteTemp/
    >> Nothing happens in FF - Looks wierd in IE7 - Haven't tried IE6 yet
    >> (dont have it on this macine!)

    >
    > I don't understand. I tried it in FF, and the table was there, centered
    > vertically in the middle of the page.


    Just realized this may be a bit unclear. I mean I tried your actual
    link, and looked fine.
    Ben C, Oct 27, 2006
    #7
  8. CRON

    Nico Schuyt Guest

    CRON wrote:
    > Anyone come across a simple, cross-browser compatible way of aligning
    > a table to the vertical centre of a page?


    if you want to center something vertically, it's back to tables:
    http://www.nicoschuyt.nl/test/center.htm

    But why is it essential to center it vertically? And do you really need a
    table for the contents?

    --
    Nico Schuyt
    http://www.nicoschuyt.nl/
    Nico Schuyt, Oct 27, 2006
    #8
  9. CRON

    CRON Guest


    > > I don't understand. I tried it in FF, and the table was there, centered
    > > vertically in the middle of the page.


    ha ha oops - my bad! It was stuck to the top of the page when I tried
    it yesterday but I redid it before uploading and never tested it again
    in FF. It's working ok now but in IE7 it's aligned top right?! Still
    havent tried IE6. There should really just be a vertical float option
    in CSS for this sort of thing!
    CRON, Oct 28, 2006
    #9
  10. CRON

    CRON Guest

    Nico Schuyt wrote:
    > if you want to center something vertically, it's back to tables:
    > http://www.nicoschuyt.nl/test/center.htm


    Wow, thanks Nico! I never would have thought of setting the height of
    body & html tags!

    > But why is it essential to center it vertically?


    it's not particularly important, i just think it would look better and
    I use layouts like this on a lot of sites so it'l be handy in future.

    > And do you really need a table for the contents?


    No , I don't really need a table but I'm not a purist and tables are
    far easier for me to manage so there's no reason not to use them.

    Thanks everyone for the help !
    Ciarán
    CRON, Oct 28, 2006
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Tim Stokes

    Centre align content on the page

    Tim Stokes, Jun 17, 2004, in forum: HTML
    Replies:
    2
    Views:
    387
    Tim Stokes
    Jun 17, 2004
  2. Ant
    Replies:
    7
    Views:
    456
  3. Bundy
    Replies:
    4
    Views:
    471
    dorayme
    Nov 20, 2006
  4. Bundy
    Replies:
    17
    Views:
    567
    Blinky the Shark
    Dec 24, 2006
  5. Spikey Mikey

    Centre table plus layers in window

    Spikey Mikey, Aug 5, 2004, in forum: Javascript
    Replies:
    0
    Views:
    69
    Spikey Mikey
    Aug 5, 2004
Loading...

Share This Page