ansaurus

Question

Cannot get CSS Elements centered

Answer 1

A:

As far as I know it simply doesn't work. text-align centers text or inline content, not block elements.

Edit: On the other hand The Disintegrator's link makes sense. Unfortunately, only for fixed-sized blocks.

Michael Krelin - hacker 2009-08-28 14:44:56

-1 what!

Crimson 2009-08-28 14:51:30

Crimson, you can not center block element without knowing its width ahead of time.

Michael Krelin - hacker 2009-08-29 11:02:11

Answer 2

A:

You're placing the header absolutely so it's being offset from the containing block (i.e. body), not the parent element. What you want is Relative positioning.

absolute

The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.

- 9.3.1 Choosing a positioning scheme: 'position' property

Absolute:

<html>
    <head>
     <style type="text/css">
      body {
       text-align: center;
      }
      #container {
       color:blue;
       border:1px solid blue;

       width: 770px;
       margin: 0 auto;
       text-align: left;
      }
      #topHeader
      {
       color:red;
       border:1px solid red;

       position:absolute;
       width: 695px;
       height: 242px;
       top: 0px;
       left: 0px;
      }  
     </style>
    </head>
    <body>
     outside
     <div id="container">
      inside
      <div id="topHeader">deep inside</div>
      <!-- All other elements go here as well-->
     </div>
    </body>
</html>

Relative:

<html>
    <head>
     <style type="text/css">
      body {
       text-align: center;
      }
      #container {
       color:blue;
       border:1px solid blue;

       width: 770px;
       margin: 0 auto;
       text-align: left;
      }
      #topHeader
      {
       color:red;
       border:1px solid red;

       position:relative;
       width: 695px;
       height: 242px;
       top: 0px;
       left: 0px;
      }  
     </style>
    </head>
    <body>
     outside
     <div id="container">
      inside
      <div id="topHeader">deep inside</div>
      <!-- All other elements go here as well-->
     </div>
    </body>
</html>

CptSkippy 2009-08-28 14:45:33

Answer 3

+5 A:

Try with this dead centre

The Disintegrator 2009-08-28 14:45:44

+1, I liked the idea.

Michael Krelin - hacker 2009-08-28 14:48:28

Awesome example. Added it to my CSS techniques cheat list.

Programming Hero 2009-08-28 14:49:50

+1 Nice resource.

rick schott 2009-08-28 14:53:50

Answer 4

A:

Try adding this to the top of your css file:

// Wipes out any preexisting padding and margin.
html, body {
    padding: 0;
    margin: 0;
}

Then add a position: relative; directive to the class you want centered. Actually, try adding it to the html, body one so that all your classes use relative position. It might be that you have position: absolute; set which then combines with the left: 0px; to force your header contain to ignore the margin: 0 auto; and stay on the left of the page.

Daniel Bingham 2009-08-28 14:47:34

Answer 5

A:

The primary issue is the absolute positioning of your #topHeader element. Because you have it absolutely positioned with top: 0px; left: 0px;, that's exactly where it's going to be positioned - at the top left of the page.

Start off by removing the absolute positioning from the #topHeader element.

bcwood 2009-08-28 14:51:52

Answer 6

A:

One thing to check when trying out all of these methods of centering is to make sure that your doctype is correct for the method that is being used.

Hope this helps for you.

Chris 2009-08-28 15:13:47

ansaurus

tags:

views:

answers:

Cannot get CSS Elements centered

related questions