html - HTML: コンテナの中央揃え

Question

私はこのサイトに取り組んでいます。'margin: 0px auto;' を使用したにもかかわらず、何らかの理由で、クラス 'title' と 'container' がページの中央に表示されません。財産。CSS内の何かであるとほぼ100％確信していますが、何がわかりません。

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

Google Chrome と Firefox では IE の方が優れていると思いますが、フッターが間違った場所にあると思います。リストされているcssのように足を使用していません。CSSの.footをフッターに変更するだけです（html5を使用していると仮定）

フッター{ クリア: 両方 }

ブラウザ固有のコードを調べることをお勧めします (ここで検索するか、Google で検索してください)。ファイアフォックス

Answer 6

タイトル div を 100% 固定幅のコンテナーに配置してみてください

Answer 7

---

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