Question

我正在学习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;}

Answer 1

将text-align:center用于您的内容...

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

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

Answer 2

在#content非身体

上加上宽度和边距

body { }

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

Answer 3

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

你想要什么......？如果您希望所有内容都以徽标，页脚和所有内容为中心，请在CSS中使用上述内容或使用@Nikhil krishnan的上述代码。

Answer 4

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

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

网站似乎没有“中心”

4 个答案: