Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Options

Horizontal & Vertical Centering of Div's

edited October 2005 in Vanilla 1.0 Help
I need to know if this is possible for a div to be horizontally and vertically centered on a page, WITHOUT know the width and height of the page before hand. I know it is possible with CCS, BUT, it only works in Safari. Does anyone know of a JS way to do this? I would really appreciate your help. Thanks heaps.

Comments

  • Options
    Oh. BTW, this is for the login/ signup page for my new vanilla theme. I am not sure if it will be publically available (it is for work), but I will try.
  • Options
    horizontal:

    .divClassName { margin-left: auto; margin-right: auto; }

    vertical;

    much more tricky. i haven't found a good way of doing it. i'm sure you can do it in javascript, but i'm not too handy with javascript.
  • Options
    thanks. I got that one just before, not that way though. SoI will use this one. I really need the vertical! I did fins a few CSS hacks, but as I said, it only works in Safari, and that just won't do. Anyone for a JS version.
  • Options
    edited October 2005
    I found this [1] which lets you horizontally AND vertically center and image tag, BUT only if you know the width of the div it is on. I am not sure if this could help anyone! [1] http://www.brunildo.org/test/img_center.html
  • Options
    The way I've got an element centered is using this:

    #horizon {
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    margin-top: -50px;
    min-width: 330px;
    }

    Then putting the image in the centre. Admittedly, my friend did it for me. Have a look at the source of the front page of my site

    http://www.bambambambambam.co.uk to see how it works.
  • Options
    Thanks giginger. I can test this myself, but do you know what browsers this does, does not work in?
  • Options
    edited October 2005
    In CSS there is no unified way to absolute center objects, browsers like IE doesn't recognize the vertical positioning of an element, IIRC.

    Propably the easiest way to do that is with JS, or possibly with DHTML, I saw it done once, but it was alot of doohikeys.

    But you might want to test something like this

    position:absolute; margin:-100px 0px 0px -200px; top: 50%; left: 50%;
  • Options
    Kosmo, I just checked/ tested the code submitted by giginger, and it working in FF, Safari and Camino on the mac, and ff and ie on windows. Thanks for that giginger. I will probably use this method.
  • Options
    I could only vouch for FF and IE becuase I don't have a Mac or Linux.

    Thanks should really go to the user epohs who's here sometimes. He's the person who told me :)

    Glad it worked though.
  • Options
    that's a really clever piece of css, so simple as well!
  • Options
    lechlech Chicagoland
    I do believe this will only work in html 4.0 transitional and below, otherwise you're asking for a headache if you try to throw this one at xhtml 1.0 strict.
  • Options
    My page is XHTML Transitional and it works on that. I can't say for strict though.
  • Options
    I don't care about Script for this project. So for the moment, I will still use that piece of code.
  • Options
    oh, right! that's how you do it. technically, the top should be -(image height / 2)

    the auto-margins are the de-facto way to do horizontal centering, from what i've gathered. i think ie prefers the text-align:center, though.
  • Options
    edited October 2005
    Well, what I have experienced, IE works much better with the top: 50%; left: 50%; than with the auto shit, which is the right way to do it when W3C is concerned. And about XHTML strict, I don't think that you are allowed to use ANY descriptive information on the tags themselfs, i.e. <body bgcolor="xxx"> vs. <body>
  • Options
    yeah i have to say i didn't think xhtml strict would be concerend with what you place in your stylesheet.
This discussion has been closed.