csshtmlcentercss-reset

HTML centered DIV

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?

Solution

  • 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