0

我正在尝试使 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 左侧。如果我删除这条线，一切都很好。为什么是文本对齐：居中；id 为#content 的div 没有覆盖CSS 重置？

4

4 回答 4

1

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

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

演示 1

否则你可以为 p 标签写 css

#content p{text-align: center }

演示 2

于 2013-01-30T12:39:51.530 回答
0

试试这个

关键点是

margin: 0 auto
于 2013-01-30T12:42:57.167 回答
0

更好，更少的标记：

<!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 文件中，以获得更好的可维护性。

于 2013-01-30T12:50:13.620 回答
0

在 HTML * 标签中意味着它严格考虑所有标签的属性，正如你在两者之间提到的，你需要改变你的风格，请访问链接

于 2013-01-30T12:58:04.413 回答