Question

我正在THIS网站上工作。出于某种原因，即使我使用'margin：0px auto;'，类'title'和'container'也不在页面的中心。属性。我几乎100％肯定它是CSS中的东西，但我无法弄清楚是什么。

CSS

.container {
    margin: 0px auto;
    width: 545px;
    height: auto;
}

.title {
    margin: 0px auto;
    width: 600px;
    height: auto;
    text-align: center;
}

.elemento1 {
    float: left;
    width: 266;
    height: auto;
}

.elemento2 {
    float: right;
    width: 266;
    height: auto;
}

.foot {
    clear: both;
}

头版

<div class="title">
<font size="20">WE LIKE TO PLAY FOOTBALL</font>
</div>

<div class="container">
<div class="elemento1">
<div class="wrap">
<div class="anim">
<p><a title="Edizione 2013" href="http://wordpressitis.altervista.org/edizione-2013/"><img alt="" src="http://wordpressitis.altervista.org/wp-content/uploads/2013/01/dividere-quadrato.jpg"/></a></p>
</div>
</div>
</div>

<div class="foot">
</div>

<div class="elemento1">

<div class="wrap">
<div class="anim">
<a title="Edizione 2013" href="http://wordpressitis.altervista.org/edizione-2013/"><img alt="" src="http://wordpressitis.altervista.org/wp-content/uploads/2013/01/dividere-quadrato.jpg"/></a>
</div>
</div>

<p>
<div class="wrap">
<div class="anim">
<a title="Edizione 2013" href="http://wordpressitis.altervista.org/edizione-2013/"><img alt="" src="http://wordpressitis.altervista.org/wp-content/uploads/2013/01/dividere-quadrato.jpg"/></a>
</div>
</div>
</p>

<div class="wrap">
<div class="anim">
<a title="Edizione 2013" href="http://wordpressitis.altervista.org/edizione-2013/"><img alt="" src="http://wordpressitis.altervista.org/wp-content/uploads/2013/01/dividere-quadrato.jpg"/></a>
</div>
</div>
</div>


<div class="elemento2">


<div class="wrap">
<div class="anim2">
<a title="Edizione 2013" href="http://wordpressitis.altervista.org/edizione-2013/"><img alt="" src="http://wordpressitis.altervista.org/wp-content/uploads/2013/01/dividere-quadrato.jpg"/></a>
</div>
</div>

<p>
<div class="wrap">
<div class="anim2">
<a title="Edizione 2013" href="http://wordpressitis.altervista.org/edizione-2013/"><img alt="" src="http://wordpressitis.altervista.org/wp-content/uploads/2013/01/dividere-quadrato.jpg"/></a>
</div>
</div>
</p>

<div class="wrap">
<div class="anim2">
<a title="Edizione 2013" href="http://wordpressitis.altervista.org/edizione-2013/"><img alt="" src="http://wordpressitis.altervista.org/wp-content/uploads/2013/01/dividere-quadrato.jpg"/></a>
</div>
</div>
</div>

<div class="foot">
</div>
</div>

Answer 1

从width:266px;移除height:267px;和.wrap。

您的CSS

.wrap {
    width: 266px;
    height: 267px;
}

Answer 2

添加.wrap{margin:0 auto;}。并从这个课程中取下宽度。对我来说它有效。

Answer 3

我发现整个代码存在一个小问题。第一个问题是因为你的标题是在“div class =”wrap clearfix“id =”inner-content“下，它的宽度只有266px。所以如果你设法让你的标题出来，那么我认为你应该能够解决问题。

Answer 4

因为你的包装类，只需删除它：）

/编辑：或至少将其从div“inner-content”

中删除

Answer 5

.wrap {
margin: 0 auto;
width: 545px;
height: 267px;
}
should fix it

Answer 6

我认为你在谷歌Chrome和Firefox中使用IE更好，但在错误的地方使用了页脚。你在css中使用的不是脚。只需将你的脚在css中更改为页脚（假设你使用的是html5）

页脚{ 明确：两者 }

您可能需要查看特定于浏览器的代码（在此处搜索或google）。 Firefox

Answer 7

尝试将标题div放在固定宽度为100％的容器中

HTML：集中容器

7 个答案: