How to center a div in the middle of the screen

Nao

  • Dadman with a boy
  • Posts: 16,078

MultiformeIngegno

  • Posts: 1,337

Nao

  • Dadman with a boy
  • Posts: 16,078
Re: How to center a div in the middle of the screen
« Reply #17, on April 3rd, 2012, 02:29 PM »
<sigh>...

Really dunno what to say. Works for me in 11.62... :-/

Okay, is your site height fixed, and is it going to remain fixed (in pixels)?
If yes, it's best to implement centering via a negative margin.

MultiformeIngegno

  • Posts: 1,337
Re: How to center a div in the middle of the screen
« Reply #18, on April 3rd, 2012, 02:35 PM »
Quote from Nao on April 3rd, 2012, 02:29 PM
<sigh>...

Really dunno what to say. Works for me in 11.62... :-/
Mistery.. :ph34r: :(
Quote from Nao on April 3rd, 2012, 02:29 PM
Okay, is your site height fixed, and is it going to remain fixed (in pixels)?
If yes, it's best to implement centering via a negative margin.
Unfortunately not.. :(
I try another bit, then I'll give up and use position:absolute + negative margins on home page (only) + media queries to avoid upper page being cropped in low resolutions..

Nao

  • Dadman with a boy
  • Posts: 16,078

MultiformeIngegno

  • Posts: 1,337
Re: How to center a div in the middle of the screen
« Reply #20, on April 3rd, 2012, 03:41 PM »
Quote from Nao on April 3rd, 2012, 02:57 PM
Hey. Was looking at your code, and... Where's the table-cell definition on #page? Where's the vertical-align?
Yay!! Now it finally works!!!!! :cool: :cool: :cool:
I need to recover the Nao statue I did some time ago! :D :D

Really latest question: now that everything works, the only thing that remains is the horizontal align :P
I tried with a text-align:center on #page but nothing.. I can't use a position:absolute;left:50% + negative margins because the vertical align wouldn't work anymore...

Nao

  • Dadman with a boy
  • Posts: 16,078
Re: How to center a div in the middle of the screen
« Reply #22, on April 3rd, 2012, 03:53 PM »
Quote from MultiformeIngegno on April 3rd, 2012, 03:41 PM
Quote from Nao on April 3rd, 2012, 02:57 PM
Hey. Was looking at your code, and... Where's the table-cell definition on #page? Where's the vertical-align?
Yay!! Now it finally works!!!!! :cool: :cool: :cool:
There weren't a lot of lines to copy, really... You could have been careful :lol:
Quote
Really latest question: now that everything works, the only thing that remains is the horizontal align :P
I tried with a text-align:center on #page but nothing.. I can't use a position:absolute;left:50% + negative margins because the vertical align wouldn't work anymore...
Hmm, I think it would still work, but if you have a constant width for your site (which is required to do negative margins), you could just as well use other techniques...
No, text-align:center would be enough but you can also simply try "margin: 0 auto" on the #page (or the #wrapper). Make sure whatever gets the margin isn't set to a width of 100%, though.

MultiformeIngegno

  • Posts: 1,337

Nao

  • Dadman with a boy
  • Posts: 16,078

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
When we unite against a common enemy that attacks our ethos, it nurtures group solidarity. Trolls are sensational, yes, but we keep everyone honest. | Game Memorial

Nao

  • Dadman with a boy
  • Posts: 16,078
Re: How to center a div in the middle of the screen
« Reply #26, on April 3rd, 2012, 05:57 PM »
CSS inheritance is fun... Just on Wedge.org I've been having trouble with Wine all day. Well, not that much but it annoys me a bit that when I do a change on Weaving, I don't always think of the consequences on inherited skins... Silly me. Although one of the changes was actually for the better, I think.

MultiformeIngegno

  • Posts: 1,337

nend

  • When is a theme, no longer what it was when installed?
  • Posts: 165

Nao

  • Dadman with a boy
  • Posts: 16,078
Re: How to center a div in the middle of the screen
« Reply #29, on April 23rd, 2012, 06:00 PM »
Yeah you don't, but it's cleaner to add it because vertical margins don't do anything when you set them to auto. 'margin: auto' might imply 'center horizontally and vertically' ;)