网站似乎没有“中心”[重复]答案

【问题标题】：Site does not seem to "center" [duplicate]网站似乎没有“中心”[重复]
【发布时间】：2014-03-11 19:21:43
【问题描述】：

我正在学习 html/css，目前正在尝试我正在使用的书中的一个示例。 “站点”中的内容应该居中，但是当我在浏览器中打开文件并在 Firefox 中查看时，内容似乎是左对齐的。下面是 HTML 和 CSS（非常简单）。我真的很感谢任何帮助！

<!DOCTYPE html>
<html>
    <head>
        <title>tayco</title>
        <link href="css/styles.css" type="text/css" rel="stylesheet"/>
    </head>
    <body>
        <div id="header">
                <h1>Logo</h1>
            <div id="nav">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Products</a></li>
                <li><a href="">Services</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </div> 
    </div><!--end header-->
    <div id="content">
        <div id="feature">
            <p>Feature</p>
        </div>
        <div class="article column1">
            <p>Column One</p>
        </div>
        <div class="article column2">
            <p>Column Two</p>
        </div>
        <div id class="article column3">
            <p>Column Three</p>
        </div>
    </div>
    <div id="footer">
        <p>&copy:  Copyright 2011</p>
    </div>
</body>
</html>





body {
    width: 960px;
    margin: 0 auto;}
#content {
    overflow: auto;
    height: 100%;}
#nav, #feature, #footer {
    background-color: #efefef;
    padding: 10px;
    margin: 10px;}
.column1, .column2, .column3 {
    background-color: #efefef;
    width: 300px;
    float: left;
    margin: 10px;}
li {
    display: inline;
    padding: 5px;}

【问题讨论】：

它对我来说很好。这是 jsfiddle 中的：jsfiddle.net/ng9UG

标签： html css

【解决方案1】：

为您的内容使用text-align:center...

Jsfiddle:http://jsfiddle.net/fUy7b/1/

#content {
    overflow: auto;
    height: 100%;
    text-align:center; /*here is the code*/
}

【讨论】：

啊，谢谢！ text-align 是我正在寻找的内容！

【解决方案2】：

在#content而不是body上设置宽度和边距

body { }

#content {
    width: 960px;
    margin: 0 auto;
}

【讨论】：

【解决方案3】：

body{
  width: 960px;
  margin: 0 auto; 
  text-align:center;
        }

你到底想要什么..？如果您希望所有内容都居中，甚至是徽标、页脚和所有内容，请在您的 CSS 中使用上述内容或使用@Nikhil krishnan 的上述代码。

【讨论】：

【解决方案4】：

要在屏幕中心对齐内容，请在样式表中包含以下 CSS 规则（类）：

<style>
    #nav, #feature, #footer, #content
    {
        text-align: center;
    }
</style>

【讨论】：

谢谢！这就是我想要的！