vertically centering webpage

Discussion in 'Web Design and Development' started by djsound, Dec 22, 2010.

  1. djsound macrumors 6502a

    djsound

    Joined:
    Dec 4, 2006
    #1
    So i have tried this so many times.. I just want to align my small simple site vertically so it is centered vertically on any browser resolution.

    I tried this http://en.kioskea.net/faq/933-centering-vertically-a-web-page as it seemed like the easiest but it will not work. I made the center.js file with that script.... then I put this

    <!-- [...] -->
    <script type="text/javascript" src="center.js"></script>
    ..in my head and

    <div id="centering">

    <!Put the code of your webpage here. It will be centered -->

    </div>

    in my body....

    then what do I do ? Just put the center.js file in the main folder of my website?? That is what I did and it does not work...

    www.drawingaway.com

    thanks if anyone know how to fix it.
     
  2. zlinuk macrumors member

    Joined:
    Jul 8, 2008
    Location:
    UK
    #2
    I can't comment on the js because it's not really my thing, but I can tell you that a more common method of achieving the same result would be by using CSS.

    Simply assign a width to your "centering" div and then set it's left and right margins to "auto".

    your div will then be centred on any browser at any resolution.
     
  3. djsound, Dec 22, 2010
    Last edited: Dec 22, 2010

    djsound thread starter macrumors 6502a

    djsound

    Joined:
    Dec 4, 2006
    #3
    to center vertically? hmm wow that sounds easy but it sounds like you are talking about horizontally...

    i also set the top and bottom margins to 'auto' but no luck
     
  4. Caleb531 macrumors 6502

    Caleb531

    Joined:
    Oct 17, 2009
    #4
    This CSS should center anything vertically (thanks to this article):
    Code:
    .something {
    display: -moz-box;
    display: -webkit-box;
    display: box;
    
    -moz-box-orient: horizontal; /* the default, so not really necessary here */
    -webkit-box-orient: horizontal;
    box-orient: horizontal;
    
    -moz-box-pack: center;
    -moz-box-align: center;
    
    -webkit-box-pack: center;
    -webkit-box-align: center;
    
    box-pack: center;
    box-align: center;
    }
    
     
  5. djsound thread starter macrumors 6502a

    djsound

    Joined:
    Dec 4, 2006
    #5
    .something {
    display: -moz-box;
    display: -webkit-box;
    display: box;

    -moz-box-orient: horizontal; /* the default, so not really necessary here */
    -webkit-box-orient: horizontal;
    box-orient: horizontal;

    -moz-box-pack: center;
    -moz-box-align: center;

    -webkit-box-pack: center;
    -webkit-box-align: center;

    box-pack: center;
    box-align: center;
    }
    [/CODE][/QUOTE]

    hmmm...so I put that in the body? a bit confused =/
     
  6. Dana Beck, Dec 23, 2010
    Last edited: Dec 23, 2010

    Dana Beck macrumors member

    Dana Beck

    Joined:
    Jun 13, 2010
    Location:
    Blackwell, OK
    #6
    This page--go down to the section on "Vertical Centering"--discusses this. Although the site info applies this to tables, the same applies to divs. Essentially, just put the "100% height" declaration on the <html> tag, as well as the <body> tag:

    html, body, #wrapper {
    height:100%;
    margin: 0;
    padding: 0;
    border: none;
    text-align: center;
    }
    #wrapper {
    margin: 0 auto;
    text-align: left;
    vertical-align: middle;
    width: 400px;
    }

    Use the above CSS along with the following HTML:

    <body>
    <table id="wrapper">
    <tr>
    <td>This is centered</td>
    </tr>
    </table>
    </body>

    You can use either tables or divs. I recommend reading the entirety of the article, as it shows how to avoid quirks mode. Still relevant.

    Another page you want to look at, another way of centering both horizontally and vertically, uses <divs> and absolute positioning.
     
  7. HomeBru Studios macrumors member

    HomeBru Studios

    Joined:
    Jun 4, 2008
    #7
    I would use jQuery to get the height of the window, get the height of the document, divide the difference of the two heights by two then add a CSS "top", "margin-top", or "padding-top" of the result to the body or content div.
     
  8. djsound thread starter macrumors 6502a

    djsound

    Joined:
    Dec 4, 2006
    #8
    Dana ok I understand I put everything into a table or a div then I am going to do this to it?

    html, body, #wrapper {
    height:100%;
    margin: 0;
    padding: 0;
    border: none;
    text-align: center;
    }
    #wrapper {
    margin: 0 auto;
    text-align: left;
    vertical-align: middle;
    width: 400px;
    }

    ....I still can not get it to work..I put that code in the head of the html?
     
  9. Radam macrumors member

    Joined:
    Dec 3, 2006
    #9
    By default I believe that anything in a table cell is centered vertically. So if you wrapped your content in a one row table it should be centered vertically. I know everyone hates tables but this may be the easiest way.
     
  10. djsound thread starter macrumors 6502a

    djsound

    Joined:
    Dec 4, 2006
    #10
    ya but the table doesnt automatically resize to top and bottom of any size screen..
     
  11. Dana Beck, Dec 24, 2010
    Last edited: Dec 24, 2010

    Dana Beck macrumors member

    Dana Beck

    Joined:
    Jun 13, 2010
    Location:
    Blackwell, OK
    #11
    What I originally listed is the css code that you would apply to your 1. <html> tag, your 2. <body> tag, and, 3. a <div> named (with an id of) "wrapper." This #wrapper div would contain _all_ content in the browser viewport, including any other divs you might want to nest inside.

    In the css for wrapper, I used an example width of 400 pixels (so you could see the div on the page), but for absolute centering both horizontally and vertically, you would want to change this width to 100%.

    And, yes, this css can go in the <head> of the document (embedded) or in an external stylesheet. Easiest way to understand this is to see it graphically. Go to this "Dead Center" page and then click on "View Construction" text link at the bottom for a graphical explanation. On the construction page choose VIEW | SOURCE from your browser. Then look at the code, both css and html. If you want, you can even copy the code--both css and html--in its entirety and use it for yourself as a template. You would have to edit the #content css width and height for your object's pixel dimensions (using negative margins in pixels), but that's it.

    #content
    {
    font-family: Verdana, Geneva, Arial, sans-serif;
    background-color: #f00;
    margin-left: -125px;
    position: absolute;
    top: -35px;
    left: 50%;
    width: 250px;
    height: 70px;
    visibility: visible
    }

    I used it on this page. YOu can look at the source code here also. Also, note the DOCTYPE in the code and make sure you use the same one (4.01 transitional, loose, with a url).

    This page uses pretty much the same method, except it uses a <float> for the divs, but it's a really good permutation.

    There is a third way of absolutely centering using line-height, but I don't want to confuse you...anymore than I already have :eek: Vertical centering is a topic that current css2 doesn't really address effectively or provide handy tags for. So, just follow the Dead Centre example, as it's the easiest to understand, as it's graphical. (This is also essentially the same method that HomeBru Studios's jQuery script addresses.)

     
  12. Dana Beck macrumors member

    Dana Beck

    Joined:
    Jun 13, 2010
    Location:
    Blackwell, OK
    #12
    RE: your center.js file

    I think the reason your original script didn't work is this:

    "The align() function defined in the .js file will retrieve the content that should be centered. In this example, the item having the ID [id = "center"] will be centered. "

    Thus the alignment will work only when you place _all_ content in a <div> named "center"...the ID [id = "center"]..."center" div in this case is the same as the #wrapper div I used. I notice you named your div <div id="centering">...that is _not_ the same name...probably why it didn't work.

    Your js file itself goes in the document code between the <head> and </head> tags, i,e,:

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="pvii-2010/p7irm/p7IRMscripts.js"></script>

    The path to the .js file must also be correct in your code.



     
  13. djsound thread starter macrumors 6502a

    djsound

    Joined:
    Dec 4, 2006
    #13
    hmmm...I still dont get it. SO complicated just to center the div or table... negative margins? ..wow I am totally lost now..
     
  14. ardesigns macrumors member

    Joined:
    Mar 20, 2008
    #14
    I use this bit of code all of the time. This will vertically and horizontally center your page:

    CSS:
    Code:
    body {
    	margin: 0px; /* required */
    }
    div#wrapper {
    	/* required */
    	position: absolute;
    	overflow: visible;
    	display: block;
    	width: 100%;
    	left: 0px;
    	top: 50%;
    }
    div#center {
    
    	overflow: auto; /* set to taste */
    
    	position: absolute; /* required */
    	left: 50%; /* required */
    
    	margin-left: -100px; /* half of width */
    	width: 200px; /* width of div */
    
    	top: -100px; /* half of height */
    	height: 200px; /* height of div */
    }
    HTML:
    Code:
    <div id="wrapper"><div id="center">
    
    <!----YOUR CONTENT HERE---->
    
    </div></div>
    That's it! I wish I could credit it, but I forget where I got it from.

    Hope that helps,
    ARDesigns
     
  15. Dana Beck macrumors member

    Dana Beck

    Joined:
    Jun 13, 2010
    Location:
    Blackwell, OK
    #15
    ardesigns's css and accompanying html have commented out--in the example code--the specs needed to achieve negative margins for absolute centering, so perhaps that will clear things up for you. Essentially, it involves using a 50% offset, given the fixed dimensions of your object to be centered. His example pretty much explains it all, with great simplicity and efficiency. And, yes, you did tackle, ironically, one of the subjects that does not have an easy solution in web design;) Horizontal centering? That's easy. Vertical centering? Not so much.
     
  16. MagicWok macrumors 6502a

    Joined:
    Mar 2, 2006
    Location:
    London
    #16
    Looking at your source code, you've put a fair amount of CSS in the head.

    I would think about putting all the css for the content of your site into a seperate CSS file, such as "style.css" and linking to it with a reference in the header:

    Code:
    <link href="style.css" rel="stylesheet" type="text/css" />
    If you get time - try using CSS to move away from the tables you're using too. Good luck!
     
  17. djsound thread starter macrumors 6502a

    djsound

    Joined:
    Dec 4, 2006
    #17
    http://drawingaway.com/

    hahahaha...I tried haha......geez i guess ill have to try again later. i though i understood kind of but I guess not.
     
  18. hobbbz macrumors 6502a

    hobbbz

    Joined:
    Mar 8, 2005
    #18
    I don't know what type of site you're trying to create so take this as you will.

    The reason it is hard to vertically center something in CSS is that the web is designed to be limited horizontally and flow downward. Not the other way around.

    You're breaking a lot of conventions with starting by trying to do a V. centered site and the fact that you don't know how to implement a linked stylesheet tells me you might be missing out on a lot of the basics about semantic web site creation.

    Maybe buy yourself a (e)book or two.
    -----------------------------------------------
    Solution:
    Give your main container div a top margin of say 100px; and don't try to "center" it. If your div is only 600px or so high, it will appear centered.
     
  19. djsound, Feb 10, 2011
    Last edited: Feb 10, 2011

    djsound thread starter macrumors 6502a

    djsound

    Joined:
    Dec 4, 2006
    #19
    Thanks for the info hobbbz. I know web sites are designed to flow downwards...so that would also mean that I know that I am trying to do something unconventional. If it was conventional I'm sure there would be a button that says "center vertically" in Dreamweaver or something. If you looked at the page I am talking about you would see that a style sheet IS attached to my div's...so again. Thanks. You obviously know everything about websites and yet you still offered a totally useless solution. Seriously , you think if my site starts 100 pixels fro the top that it will 'look vertically centered'?? hahaha..for one it will look different one every persons monitor with a different resolution. The ONLY common thing between viewers would be the 100 pixel margin on top....another thing, if my main div/table is 900 pixels high then it will run right off the bottom of the screen....and that WOULD NOT look vertically centered. Maybe you should read a book.


    ardesigns -

    top: -100px; /* half of height */
    height: 200px; /* height of div */

    I shouldn't have to put a height don't you think? Everyone has a different height depending on their screen resolution no? I think I should be able to just put 50% from top and thats it or something...that would mean 50% from top no matter what the resolution is....maybe I am wrong. I still cant get it to work..

    I am trying to accomplish something like this.... http://antzmedia.com/sites/demo-div/div-at-the-center-of-screen.htm but with css. I have a mini site with everything within 1 table. I just want that one table to be vertically and horizontally centered like that example. Even when you change your browser size it stays centered in both directions.
     
  20. Jamie37211 macrumors regular

    Joined:
    Dec 13, 2010
    #20
    Seven minutes: 4-5 minutes searching and reading, 2-3 minutes coding up in simple text editor. Uploaded. Working here
     
  21. djsound thread starter macrumors 6502a

    djsound

    Joined:
    Dec 4, 2006
    #21
    Congratulations Jamie...I looked at the code it doesn't seem to complex but I still cant get it. Do you mind explaining what you did? You have 1 div called floater...and a div inside it called content. But whatis the overall idea behind it? Why "#floater {height:45%; margin-bottom:-150px; position:relative;}"?
    and why "#content {clear:both; height:300px; position:relative; margin:0 auto; background-color:#FFCC66; width:70%; padding:20px;}?

    I guess the whole idea is that they both are relative to something?? I just dont get it...just trying to totally understand this. thanks
     
  22. Jamie37211 macrumors regular

    Joined:
    Dec 13, 2010
    #22
    No. The content div is not inside the floater div. The floater div comes first - it's an empty div providing an invisible "bubble", if you will, above and behind the content div. They're relative to one another, as well as their parent. That's why setting the floater margin to -150px (half the height of content, if you didn't notice) affects the position of content. If you remove the top margin pice altogether, content sits just below it.

    Take the code - every bit of it is right there in "view source" - and stick it in a plain text HTML editor - not Dreamweaver or other crap WYSIWYG editor. Play with it...break it, fix it again. Google things you see in the code but don't know. Find out how it works by actually doing it. It's the best way to learn.
     
  23. djsound thread starter macrumors 6502a

    djsound

    Joined:
    Dec 4, 2006
    #23
    hmmm...I wish I grabbed the code before you took it down =)
     

Share This Page