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

Posted 2023-03-06

技术标签:

【中文标题】网站似乎没有“中心”[重复]【英文标题】：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 【参考方案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>

【讨论】：

谢谢！这就是我想要的！

以上是关于网站似乎没有“中心”[重复]的主要内容，如果未能解决你的问题，请参考以下文章

SQL Query 似乎执行了两次 [重复]