Question

我正试图以div为中心。这是我的代码：

<!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>

它不是完全居中的，因为我在CSS重置中设置了text-align。如果我删除这一行一切都很好。为什么是text-align：center; id #content不重写CSS重置的div？

Answer 1

您需要!important覆盖（留下p标记）

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

<强> DEMO 1

否则你可以为p标签写css

#content p{text-align: center }

DEMO 2

Answer 2

尝试this

关键点是

margin: 0 auto

Answer 3

更好，更少标记：

<!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>

在大多数情况下，最好不要使用“线条样式”。还可以在单独的css文件中移动样式，以获得更好的可维护性。

Answer 4

在HTML *标签中意味着它严格考虑所有标签，如你所提到的那样，你需要改变你的风格请访问链接

以HTML为中心的DIV

4 个答案: