ansaurus

Question

how to get main div container to align to centre.

Answer 1

+4 A:

Do not use the * selector as that will apply to all elements on the page. Suppose you have a structure like this:

...
<body>
    <div id="content">
        <b>This is the main container.</b>
    </div>
</body>
</html>

You can then center the #content div using:

#content {
    width: 400px;
    margin: 0 auto;
    background-color: #66ffff;
}

Don't know what you've seen elsewhere but this is the way to go. The * { margin: 0; padding: 0; } snippet you've seen is for resetting browser's default definitions for all browsers to make your site behave similarly on all browsers, this has nothing to do with centering the main container.

Most browsers apply a default margin and padding to some elements which usually isn't consistent with other browsers' implementations. This is why it is often considered smart to use this kind of 'resetting'. The reset snippet you presented is the most simplest of reset stylesheets, you can read more about the subject here:

http://meyerweb.com/eric/tools/css/reset/

Tatu Ulmanen 2010-02-17 09:31:36

+1 for your answer..

c0mrade 2010-02-17 09:32:41

Is is not good practice to apply *{padding:0px;margin:0px;}, to make it more cross browser compatible?

Cesar Lopez 2010-02-17 09:34:31

@Cesar Lopes, in my opinion it is, but there seems to be people who think otherwise. But I'd say go ahead with it.

Tatu Ulmanen 2010-02-17 09:38:26

@Tatu Ulmanen, Thank you for your great question.

Cesar Lopez 2010-02-17 09:57:40

Answer 2

+1 A:

I would omit the * { text-align:center } declaration, as it sets center alignment for all elements.

Usually with a fixed width container margin: 0 auto should be enough

Juraj Blahunka 2010-02-17 09:32:52

ansaurus

tags:

views:

answers:

how to get main div container to align to centre.

related questions