HTML centered DIV

Question

I am trying to center a div. This is my code:

<!Doctype Html>
<html>
    <head>
        <title>title</title>
        <style type="text/css">
            * {
                text-align: left;
            }
        </style>
    </head>
    <body>
        <div id="container" style="width: 500px; margin-left: auto; margin-right: auto; text-align: center;">
            <div id="content" style="text-align: center;">
                <p>Beispiel: DIV Container horizontal zentrieren.</p>
            </div>
        </div>
    </body>
</html>

It isn't completely center, because I set in the CSS reset that text-align is left. If I remove this line everything is fine. Why is text-align: center; of the div with the id #content not overriding the CSS reset?

Is it simply your default rule matches the
tag?
– Paul Dixon Jan 30 '13 at 12:38 — Paul Dixon, Jan 30 '13 at 12:38

score 1 · Accepted Answer · answered Jan 30 '13 at 12:39

1

You need !important to overwrite that (leaving the p tag)

#content{margin:0 auto; background:red; width: 500px; text-align: center !important;}

DEMO 1

Or else you can write css for p tag

#content p{text-align: center }

DEMO 2

answered Jan 30 '13 at 12:39

Sowmya

26,684
21
96
136

Thanks, that was the problem :) – Niklas Jan 30 '13 at 12:47
It is not recommended to overide styles with `!important` because you end up with a mess of cascading issues. http://james.padolsey.com/usability/dont-use-important/ – gearsdigital Jan 30 '13 at 12:56

score 0 · Answer 2 · answered Jan 30 '13 at 12:42

0

Try this

Key point is

margin: 0 auto

answered Jan 30 '13 at 12:42

Brend

194
6

score 0 · Answer 3 · answered Jan 30 '13 at 12:50

Even better, less markup:

<!Doctype Html>
<html>
    <head>
        <title>title</title>
        <style type="text/css">
            #content{
                width: 500px;
                margin:0 auto;
            }
            #content p {
                text-align:center; 
            }
        </style>
    </head>
    <body>
        <div id="content">
            <p>Beispiel: DIV Container horizontal zentrieren.</p>
        </div>
    </body>
</html>

In most cases it's better to prevent useing ìnline-styles`. Also move your styles in an seperate css file for a better maintainability.

score 0 · Answer 4 · answered Jan 30 '13 at 12:58

0

In HTML * tag means its consider all tags strictly the property as you mention in between, you need to little change your style please visit link

answered Jan 30 '13 at 12:58

The AV

609
3
7
17

HTML centered DIV

4 Answers4