6

How do I center my page content so it is centered on every type of screen size? For instance, on Allegorithmic if I resize my browser, the center content will shift to the left until it reaches the browser window. There are certain background elements that extend horizontally infinitely (the dark gray at the top, the light grey in the middle, etc.). I can open this website on my laptop and on my iMac and it is centered. I thought I might use absolute positioning to move content x amount of pixels from the left, but that won't work because 300 pixels that center the content on a small screen, won't center it on a large screen.

So in essence I would like to duplicate the functionality of the Allegorithmic website, have backgrounds that are infinite horizontally, but have certain content that always stays "centered".

spentak
  • 4,627
  • 15
  • 62
  • 90

6 Answers6

7

If you want elements always centered use margin: 0 auto; in the styles on it.

#yourElement{
    margin: 0 auto;
}

W3.org reference for centering things using CSS

To get background elements to extend the whole page length just give them a width of 100%, then make a child container within and give them the same style as above. I bet the example you gave is just using a 1px by some height with lines to get that look on the background.

Example

Example with image bg

Markup

<div id="background">
    <div id="content">
    </div>
</div>

CSS

#background{ 
    width: 100%;
}
#content{  
    width: 960px;
    margin: 0 auto;
}
Loktar
  • 34,764
  • 7
  • 90
  • 104
0

Try this -

.center{
    margin: 0 auto;
    position: relative;
}

auto should align the page content to center leaving the space (left, right) depending on the browser resize.

Mahesh
  • 34,573
  • 20
  • 89
  • 115
0

You can define containers with an inside div in them for each 'level'.

<div id="first" class="container"><div class="inner">
  first content goes there
</div></div>
<div id="second" class="container"><div class="inner">
  another content goes there
</div></div>
...
...
...

and style it with css, use id for custom styles per containers (those are 100% wide so they have the full bg)

.container {
  background: red;
  text-align: center;
}
.container > .inner {
  margin: 0 auto;
  width: 960px;
  text-align: left;
}
mreq
  • 6,414
  • 4
  • 37
  • 57
0

HTML

<div id="wrapper">
   <header>
      <nav>
        ....
      </nav>
   </header>

   <div id="main">
       .....
   </div>
</div>

CSS

#wrapper {
  width: 960px /* whatever you wanted but there has to be a width*/
  margin: 0 auto;  
}

This will wrap and center the entire contents of your page.

Hope this helps.

GoGoGarrett
  • 613
  • 4
  • 16
0

I have some examples here you can look at. The first one (red box) I believe is what you are looking for. http://jsfiddle.net/kYCWX/

Will
  • 19,661
  • 7
  • 47
  • 48
0

My preferred and most reliable solution at the moment is:

display: flex;
justify-content: center;

I've also used this successfully:

margin: 0 auto;
text-align: center;

The second line has helped me in some cases, where margin: 0 auto (best for older browsers according to MDN) alone had no effect. I also found that this method works better when playing with the width.

By the way, the 0 refers to vertical margin, you can increase it, it's the auto that does the horizontal centering, by letting the browser choose the horizontal margins.

These are the two main solutions, but in my experience, they can easily be broken by some other seemingly unrelated property. A 100% reliable way to center a container still appears to be missing from CSS.

Nagev
  • 10,835
  • 4
  • 58
  • 69